diff --git a/src/resources/projects/website/listing/_filter.ejs.md b/src/resources/projects/website/listing/_filter.ejs.md
index c72ec41fad..5dc37fa3b0 100644
--- a/src/resources/projects/website/listing/_filter.ejs.md
+++ b/src/resources/projects/website/listing/_filter.ejs.md
@@ -10,32 +10,29 @@ const sortUi = listing['sort-ui'];
   <% const sortableFields = listing.utilities.sortableFieldData(); %>
   <% if (sortUi && sortableFields.length > 0) { %>
    <div class="input-group input-group-sm quarto-listing-sort">
-     <span class="input-group-text"><i class="bi bi-sort-down"></i></span>
-     <select
+    <span class="input-group-text"><i class="bi bi-sort-down"></i></span>
+    <select
       id="listing-<%- listing.id %>-sort"
       class="form-select"
-      aria-label="<%- listing.utilities.localizedString("listing-page-order-by")%>"
+      aria-label="<%- listing.utilities.localizedString("listing-page-order-by") %>"
       onChange="window['quarto-listings']['listing-<%- listing.id %>'].sort(this.options[this.selectedIndex].value, { order: this.options[this.selectedIndex].getAttribute('data-direction')})"
     >
-       <option value="" disabled selected hidden><%- listing.utilities.localizedString("listing-page-order-by")%></option>
-       <option value="index" data-direction="asc"><%- listing.utilities.localizedString("listing-page-order-by-default")%></option>
-       <% for (const sortData of sortableFields) { %>
-         <option
-          value="<%- sortData.listingSort.field %>"
-          data-direction="<%- sortData.listingSort.direction %>">
-          <%= sortData.description %>
-        </option>
-       <% } %>
-     </select>
+      <option value="" disabled selected hidden><%- listing.utilities.localizedString("listing-page-order-by") %></option>
+      <option value="index" data-direction="asc"><%- listing.utilities.localizedString("listing-page-order-by-default") %></option>
+      <% for (const sortData of sortableFields) { %>
+      <option
+        value="<%- sortData.listingSort.field %>"
+        data-direction="<%- sortData.listingSort.direction %>">
+        <%- sortData.description %>
+      </option>
+      <% } %>
+    </select>
   </div>
-
-
   <% } %>
-
   <% if (filterUi) { %>
     <div class="input-group input-group-sm quarto-listing-filter">
       <span class="input-group-text"><i class="bi bi-search"></i></span>
-      <input type="text" class="search form-control" placeholder="<%- listing.utilities.localizedString("listing-page-filter")%>" />
+      <input type="text" class="search form-control" placeholder="<%- listing.utilities.localizedString("listing-page-filter") %>" />
     </div>
   <% } %>
 </div>
diff --git a/src/resources/projects/website/listing/_metadata.ejs.md b/src/resources/projects/website/listing/_metadata.ejs.md
index 45d19c4a7e..7c26782f35 100644
--- a/src/resources/projects/website/listing/_metadata.ejs.md
+++ b/src/resources/projects/website/listing/_metadata.ejs.md
@@ -2,7 +2,9 @@
 const categories = item.categories !== undefined ? item.categories.join(',') : undefined;
 %>
 
+```{=html}
 <div class="quarto-listing-item-metadata" style-"display:none;">
 <span class="original-value" data-original-value="${itemNumber}" style="display:none;"></span>
 <% if (categories !== undefined) { %><span class="categories" data-categories="${categories}" style="display:none;"></span><% } %>
 </div>
+```
diff --git a/src/resources/projects/website/listing/_pagination.ejs.md b/src/resources/projects/website/listing/_pagination.ejs.md
index 046b3f0818..5ec6d25200 100644
--- a/src/resources/projects/website/listing/_pagination.ejs.md
+++ b/src/resources/projects/website/listing/_pagination.ejs.md
@@ -1,8 +1,10 @@
-<div class="listing-no-matching d-none"><%- listing.utilities.localizedString("listing-page-no-matches")%></div>
-<% if (listing["page-size"] < items.length) { %>
 ```{=html}
+<div class="listing-no-matching d-none">
+<%- listing.utilities.localizedString("listing-page-no-matches") %>
+</div>
+<% if (listing["page-size"] < items.length) { %>
 <nav id="<%- listing.id %>-pagination" class="listing-pagination" aria-label="Page Navigation">
   <ul class="pagination"></ul>
 </nav>
-```
 <% } %>
+```
diff --git a/src/resources/projects/website/listing/item-default.ejs.md b/src/resources/projects/website/listing/item-default.ejs.md
index edaebc664f..a433061c83 100644
--- a/src/resources/projects/website/listing/item-default.ejs.md
+++ b/src/resources/projects/website/listing/item-default.ejs.md
@@ -31,44 +31,64 @@ return value;
 
 let value = readField(item, field);
 if (value !== undefined) {
-print(`<div class="metadata-value listing-${field}">${listing.utilities.outputLink(item, field, value)}</div>`);  
+print(`<div class="metadata-value listing-${field}">${listing.utilities.outputLink(item, field, value)}</div>`);
  }
 }
 %>
 
-<div class="quarto-post image-<%= imageAlign %>" <%= listing.utilities.metadataAttrs(item) %>>
+::: {.quarto-post .image-<%= imageAlign %> <%= listing.utilities.metadataAttrs(item) %>}
+
 <% if (fields.includes('image')) { %>
-<div class="thumbnail">
-<a href="<%- item.path %>" class="no-external">
+`<div class="thumbnail"><a href="<%- item.path %>" class="no-external">`{=html}
 <% if (item.image) { %>
 <%= listing.utilities.img(itemNumber, item.image, "thumbnail-image", item['image-alt'], item['image-lazy-loading'] ?? listing['image-lazy-loading']) %>
 <% } else { %>
 <%= listing.utilities.imgPlaceholder(listing.id, itemNumber, item.outputHref) %>
 <% } %>
-</a>
-</div>
+`</a></div>`{=html}
 <% } %>
-<div class="body">
+
+::: {.body}
+
 <% if (fields.includes('title')) { %>
-<h3 class="no-anchor listing-title"><a href="<%- item.path %>" class="no-external"><%= item.title %></a></h3>
-<div class="listing-subtitle"><a href="<%- item.path %>" class="no-external"><%= item.subtitle %></a></div>
+`<h3 class="no-anchor listing-title"><a href="<%- item.path %>" class="no-external">`{=html} <%= item.title %> `</a></h3>`{=html}
+<% if (fields.includes('subtitle')) { %>
+`<div class="listing-subtitle"><a href="<%- item.path %>" class="no-external">`{=html} <%= item.subtitle %> `</a></div>`{=html}
+<% } %>
 <% } %>
-<% if (fields.includes('categories') && item.categories) { %> 
-<div class="listing-categories">
+
+<% if (fields.includes('categories') && item.categories) { %>
+`<div class="listing-categories">`{=html}
 <% for (const category of item.categories) { %>
-<div class="listing-category" onclick="window.quartoListingCategory('<%=utils.b64encode(category)%>'); return false;"><%= category %></div>
+`<div class="listing-category" onclick="window.quartoListingCategory('<%- utils.b64encode(category) %>'); return false;">`{=html} <%= category %> `</div>`{=html}
+<% } %>
+`</div>`{=html}
 <% } %>
-</div>
-<% } %> 
+
 <% if (fields.includes('description')) { %>
-<div class="delink listing-description"><a href="<%- item.path %>" class="no-external"><%= item.description %></a></div>
+`<div class="delink listing-description"><a href="<%- item.path %>" class="no-external">`{=html} <%= item.description %> `</a></div>`{=html}
+<% } %>
+
+:::
+
+::: {.metadata}
+`<a href="<%- item.path %>" class="no-external">`{=html}
+<% if (fields.includes('date') && item.date) { %>
+`<div class="listing-date">`{=html} <%= item.date %> `</div>`{=html}
+<% } %>
+
+<% if (fields.includes('author') && item.author) { %>
+`<div class="listing-author">`{=html} <%= item.author %> `</div>`{=html}
 <% } %>
-</div>
-<div class="metadata"><a href="<%- item.path %>" class="no-external">
-<% if (fields.includes('date') && item.date) { %><div class="listing-date"><%= item.date %></div><% } %>
-<% if (fields.includes('author') && item.author) { %><div class="listing-author"><%= item.author %></div><% } %>
-<% if (fields.includes('reading-time') && item['reading-time']) { %> <div class="listing-reading-time"><%= item['reading-time'] %></div> <% } %>
+
+<% if (fields.includes('reading-time') && item['reading-time']) { %>
+`<div class="listing-reading-time">`{=html} <%= item['reading-time'] %> `</div>`{=html}
+<% } %>
+
 <% for (const field of otherFields) { %>
-<% outputMetadata(item, field) %><% } %></a></div>
+<% outputMetadata(item, field) %>
+<% } %>
+`</a>`{=html}
+:::
 
-</div>
+:::
diff --git a/src/resources/projects/website/listing/item-grid.ejs.md b/src/resources/projects/website/listing/item-grid.ejs.md
index a584349734..8c49b15150 100644
--- a/src/resources/projects/website/listing/item-grid.ejs.md
+++ b/src/resources/projects/website/listing/item-grid.ejs.md
@@ -37,17 +37,18 @@ return !["title", "image", "image-alt", "date", "author", "subtitle", "descripti
 });
 %>
 
-<div class="g-col-1" <%= listing.utilities.metadataAttrs(item) %>>
+::: {.g-col-1 <%= listing.utilities.metadataAttrs(item) %> }
+
+```{=html}
 <a href="<%- item.path %>" class="quarto-grid-link">
-<div class="quarto-grid-item card h-100 <%-`card-${align}`%><%= hideBorders ? ' borderless' : '' %>">
+<div class="quarto-grid-item card h-100 <%- `card-${align}` %><%- hideBorders ? ' borderless' : '' %>">
+```
 
 <% if (fields.includes('image')) { %>
-
 <% if (item.image) { %>
-
-<p class="card-img-top">
+`<p class="card-img-top">`{=html}
 <%= listing.utilities.img(itemNumber, item.image, "thumbnail-image card-img", item['image-alt'], item['image-lazy-loading'] ?? listing['image-lazy-loading']) %>
-</p>
+`</p>`{=html}
 <% } else { %>
 <%= listing.utilities.imgPlaceholder(listing.id, itemNumber, item.outputHref) %>
 <% } %>
@@ -55,65 +56,82 @@ return !["title", "image", "image-alt", "date", "author", "subtitle", "descripti
 <% } %>
 <% if (showField('title') || showField('subtitle') || showField('description') || showField('author') || showField('date') || otherFields.length > 0) { %>
 
-<div class="card-body post-contents">
-<% if (showField('title')) { %><h5 class="no-anchor card-title listing-title"><%= item.title %></h5><% } %>
-<% if (showField('subtitle')) { %><div class="card-subtitle listing-subtitle"><%= item.subtitle %></div><% } %>
-<% if (showField('reading-time')) { %><div class="listing-reading-time card-text text-muted"><%= item['reading-time'] %></div> <% } %>
+`<div class="card-body post-contents">`{=html}
+
+<% if (showField('title')) { %>
+`<h5 class="no-anchor card-title listing-title">`{=html} <%= item.title %> `</h5>`{=html}
+<% } %>
+
+<% if (showField('subtitle')) { %>
+`<div class="card-subtitle listing-subtitle">`{=html} <%= item.subtitle %> `</div>`{=html}
+<% } %>
+
+<% if (showField('reading-time')) { %>
+`<div class="listing-reading-time card-text text-muted">`{=html} <%= item['reading-time'] %> `</div>`{=html}
+<% } %>
 
 <% if (fields.includes('categories') && item.categories) { %>
+`<div class="listing-categories">`{=html}
 
-<div class="listing-categories">
-  <% for (const category of item.categories) { %>
-<div class="listing-category" onclick="window.quartoListingCategory('<%=utils.b64encode(category)%>'); return false;"><%= category %></div>
-  <% } %>
-</div>
+<% for (const category of item.categories) { %>
+`<div class="listing-category" onclick="window.quartoListingCategory('<%- utils.b64encode(category ) %>'); return false;">`{=html} <%= category %> `</div>`{=html}
+<% } %>
 
+`</div>`{=html}
 <% } %>
-<% if (showField('description')) { %>
 
-<div class="card-text listing-description delink"><%= item.description %></div>
+<% if (showField('description')) { %>
+`<div class="card-text listing-description delink">`{=html} <%= item.description %> `</div>`{=html}
 <% } %>
-<% 
+
+<%
 const flexJustify = showField('author') && showField('date') ? "justify" : showField('author') ? "start" : "end";
 %>
+
 <% if (showField('author') || showField('date')) { %>
-<div class="card-attribution card-text-small <%-flexJustify%>">
-<% if (showField('author')) { %><div class="listing-author"><%= item.author %></div><% } %>
-<% if (showField('date')) { %><div class="listing-date"><%= item.date %></div><% } %>
-</div>
+`<div class="card-attribution card-text-small <%- flexJustify %>">`{=html}
+
+<% if (showField('author')) { %>
+`<div class="listing-author">`{=html} <%= item.author %> `</div>`{=html}
 <% } %>
 
-<% if (otherFields.length > 0) { %>
+<% if (showField('date')) { %>
+`<div class="listing-date">`{=html} <%= item.date %> `</div>`{=html}
+<% } %>
 
-<table class="card-other-values">
-<% for (const field of otherFields) { 
-let value = readField(item, field);  
-%>
-<tr>
-<td><%= listing.utilities.fieldName(field) %></td>
-<td class="<%-field%>"><%= listing.utilities.outputLink(item, field, value) %></td>
-</tr>
+`</div>`{=html}
 <% } %>
-</table>
 
+<% if (otherFields.length > 0) { %>
+`<table class="card-other-values">`{=html}
+<% for (const field of otherFields) {
+let value = readField(item, field);
+%>
+`<tr>`{=html}
+`<td>`{=html} <%= listing.utilities.fieldName(field) %> `</td>`{=html}
+`<td class="<%- field %>">`{=html} <%= listing.utilities.outputLink(item, field, value) %> `</td>`{=html}
+`</tr>`{=html}
+<% } %>
+`</table>`{=html}
 <% } %>
 
-</div>
+`</div>`{=html}
 <% } %>
 
 <% if (fields.includes('filename') || fields.includes('file-modified')) { %>
 
-<div class="card-footer">
+`<div class="card-footer">`{=html}
+
 <% if (fields.includes('filename')) { %>
-<div class="card-filename listing-filename">
-<%= item.filename ? item.filename : "&nbsp;" %>
-</div>
+`<div class="card-filename listing-filename">`{=html} <%= item.filename ? item.filename : "&nbsp;" %> `</div>`{=html}
 <% } %>
+
 <% if (fields.includes('file-modified')) { %>
-<div class="card-file-modified listing-file-modified">
-<%= item['file-modified'] ? item['file-modified'] : "&nbsp;"%>
-</div>
+`<div class="card-file-modified listing-file-modified">`{=html} <%= item['file-modified'] ? item['file-modified'] : "&nbsp;" %> `</div>`{=html}
 <% } %>
-</div>
+
+`</div>`{=html}
 <% } %>
-</div></a></div>
+`</div></a>`{=html}
+
+:::
diff --git a/src/resources/projects/website/listing/listing-default.ejs.md b/src/resources/projects/website/listing/listing-default.ejs.md
index c95f18c77d..4ffe8c2213 100644
--- a/src/resources/projects/website/listing/listing-default.ejs.md
+++ b/src/resources/projects/website/listing/listing-default.ejs.md
@@ -1,7 +1,7 @@
-:::{.list .quarto-listing-default}
-``````{=html}
+::: {.list .quarto-listing-default}
+
 <% for (const item of items) { %>
 <% partial('item-default.ejs.md', {listing, item, utils }) %>
 <% } %>
-``````
+
 :::
diff --git a/src/resources/projects/website/listing/listing-grid.ejs.md b/src/resources/projects/website/listing/listing-grid.ejs.md
index f049b94bb3..19d7382972 100644
--- a/src/resources/projects/website/listing/listing-grid.ejs.md
+++ b/src/resources/projects/website/listing/listing-grid.ejs.md
@@ -2,10 +2,10 @@
 const cols = listing['grid-columns'];
 %>
 
-:::{.list .grid .quarto-listing-cols-<%=cols%>}
-```{=html}
+::: {.list .grid .quarto-listing-cols-<%= cols %>}
+
 <% for (const item of items) { %>
 <% partial('item-grid.ejs.md', {listing, item, utils }) %>
 <% } %>
-```
+
 :::
diff --git a/src/resources/projects/website/listing/listing-table.ejs.md b/src/resources/projects/website/listing/listing-table.ejs.md
index 864a26f70f..a5d78321ac 100644
--- a/src/resources/projects/website/listing/listing-table.ejs.md
+++ b/src/resources/projects/website/listing/listing-table.ejs.md
@@ -84,11 +84,13 @@ return listing.utilities.outputLink(item, field, value, `listing-${field}`);
 <tr <%= listing.utilities.metadataAttrs(item) %><%= onclick(item) %>>
 <% for (const field of fields){ %>
 <td>
+```
 <%= outputValue(itemNumber, field) %>
+```{=html}
 </td>
 <% } %>
 </tr>
 <% } %>
 </tbody>
 </table>
-```
\ No newline at end of file
+```