diff --git a/lib/liquid-tags/annotate.js b/lib/liquid-tags/annotate.js
deleted file mode 100644
index 2242c4717e..0000000000
--- a/lib/liquid-tags/annotate.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/*
-Parses code blocks inside {% annotate %} ... {% endannotate %}
-Results in single line comments split out, output format is:
-
-.annotate
-  .annotate-row (n)
-    .annotate-code
-    .annotate-note
-
-Contributing rules:
-- You must wrap the entire code block in `{% annotate %}` and `{% endannotate %}`.
-- You must include a language on the starting ` ``` ` tag.
-- You can only include one code fence in the Liquid tags.
-- Notes must start with one of: `#`, `//`, `<!--`, `%%`. (comment tag)
-- The comment tag style must match the language on the code fence.
-- Multiline-style comments, such as `/*` are not supported.
-- You can include any number of spaces before the comment tag starts.
-- You can include any number of spaces after the comment tag ends.
-- You can leave after the comment tag blank to create a blank annotation.
-- You cannot create a blank code block however.
-- Anything after the comment tag will be parsed with Markdown.
-- You can use any inline Markdown tag in the comment; recommend against using block tags such as headings, blockquote, horizontal rules, tables, lists, or code fences.
-- Multiple lines in row with the comment tag will result in a single annotation.
-- Empty lines, or lines that contain only space characters, will be discarded.
-- You must start the code section with a single line comment, otherwise the two will be flipped.
-- We have not tested if this feature is compatible with other Liquid tags, but it probably is.
-- For HTML style, you can include a line after your annotations such as `<!-- -->` to maintain syntax highlighting; this will not impact what renders.
-*/
-
-import { chunk, last } from 'lodash-es'
-
-const codeFenceRegex = /^```\w*.*$/gm
-const codeFenceLangRegex = /```(\w+)/
-const commentRegexNumber = /^\s*#\s*/ // also known has hash or sharp; but the unicode name is "number sign"
-const commentRegexSlash = /^\s*\/\/\s*/
-const commentRegexXml = /^\s*<!--\s*/
-const commentRegexPercent = /^\s*%%?\s*/
-
-const languageToCommentRegex = {
-  bash: commentRegexNumber,
-  dockerfile: commentRegexNumber,
-  graphql: commentRegexNumber,
-  powershell: commentRegexNumber,
-  python: commentRegexNumber,
-  ruby: commentRegexNumber,
-  shell: commentRegexNumber,
-  text: commentRegexNumber,
-  yaml: commentRegexNumber,
-  csharp: commentRegexSlash,
-  golang: commentRegexSlash,
-  groovy: commentRegexSlash,
-  java: commentRegexSlash,
-  javascript: commentRegexSlash,
-  jsonc: commentRegexSlash,
-  scss: commentRegexSlash,
-  html: commentRegexXml,
-  markdown: commentRegexXml,
-  tasklist: commentRegexXml,
-  xml: commentRegexXml,
-  math: commentRegexPercent,
-  mermaid: commentRegexPercent,
-}
-
-export default {
-  parse(_, remainTokens) {
-    this.templates = []
-    this.liquid.parser
-      .parseStream(remainTokens)
-      .on('template', (tpl) => this.templates.push(tpl))
-      .on('tag:endannotate', function () {
-        this.stop()
-      })
-      .on('end', () => {
-        throw new Error(`tag {% annotate %} not closed`)
-      })
-      .start()
-  },
-
-  *render(context, emitter) {
-    const md = yield this.liquid.renderer.renderTemplates(this.templates, context)
-    emitter.write(parseAnnotatedCode(md))
-  },
-}
-
-function parseAnnotatedCode(md) {
-  // Determine the language for highlighting
-  const lang = md.match(codeFenceLangRegex)?.[1]
-
-  // Check the code example is parse-able
-  validate(md, lang)
-
-  // Remove ```lang and ``` from the example
-  const allCode = md.replace(codeFenceRegex, '')
-
-  // Group into code and notes
-  const lines = allCode.split('\n').filter(hasChar)
-  const groups = chunkBy(lines, matchComment(lang))
-
-  // Group groups into rows
-  const rows = chunk(groups, 2)
-
-  // Render the HTML
-  return template({ rows, lang })
-}
-
-function validate(md, lang) {
-  if (!lang) {
-    throw new Error('No language specified for {% annotate %} tag')
-  }
-  if (!languageToCommentRegex[lang]) {
-    throw new Error(
-      `Unsupported language for {% annotate %} tag. Please use one of: ${Object.keys(
-        languageToCommentRegex
-      )}`
-    )
-  }
-  if (!new RegExp(languageToCommentRegex[lang], 'm').test(md)) {
-    throw new Error(
-      'Make sure the comment syntax matches the language. Use single-line comments only.'
-    )
-  }
-}
-
-function hasChar(line) {
-  return Boolean(line.trim())
-}
-
-function chunkBy(arr, predicate) {
-  const groups = [[]]
-  let on = predicate(arr[0])
-  for (const item of arr) {
-    if ((!on && predicate(item)) || (on && !predicate(item))) {
-      on = !on
-      groups.push([])
-    }
-    last(groups).push(item)
-  }
-  return groups
-}
-
-function matchComment(lang) {
-  const regex = languageToCommentRegex[lang]
-  return (line) => regex.test(line)
-}
-
-function template({ rows, lang }) {
-  return div(
-    { class: 'annotate' },
-    rows.map(([note, code]) =>
-      div({ class: 'annotate-row' }, [
-        div({ class: 'annotate-code' }, ['', '```' + lang, ...code, '```', '']),
-        div({ class: 'annotate-note' }, ['', ...note.map(removeComment(lang)), '']),
-      ])
-    )
-  )
-}
-
-function removeComment(lang) {
-  const regex = languageToCommentRegex[lang]
-  return (line) => line.replace(regex, '')
-}
-
-const div = (...args) => h('div', ...args)
-
-function h(element, properties, children) {
-  const props = Object.entries(properties)
-    .map(([key, value]) => `${key}="${value}"`)
-    .join(' ')
-  return [`<${element} ${props}>`, ...children, `</${element}>`].join('\n')
-}
diff --git a/lib/render-content/create-processor.js b/lib/render-content/create-processor.js
index 98e975645d..eee1179705 100644
--- a/lib/render-content/create-processor.js
+++ b/lib/render-content/create-processor.js
@@ -24,29 +24,40 @@ import headingLinks from './plugins/heading-links.js'
 import rewriteTheadThScope from './plugins/rewrite-thead-th-scope.js'
 import rewriteForRowheaders from './plugins/rewrite-for-rowheaders.js'
 import wrapProceduralImages from './plugins/wrap-procedural-images.js'
+import parseInfoString from './plugins/parse-info-string.js'
+import annotate from './plugins/annotate.js'
 
 export default function createProcessor(context) {
-  return unified()
-    .use(process.env.COMMONMARK ? markdownNext : markdown)
-    .use(process.env.COMMONMARK ? gfm : null)
-    .use(remarkCodeExtra, { transform: codeHeader })
-    .use(emoji)
-    .use(remark2rehype, { allowDangerousHtml: true })
-    .use(slug)
-    .use(useEnglishHeadings, context)
-    .use(headingLinks)
-    .use(highlight, {
-      languages: { graphql, dockerfile, http, groovy, erb, powershell },
-      subset: false,
-    })
-    .use(raw)
-    .use(wrapProceduralImages)
-    .use(rewriteTheadThScope)
-    .use(rewriteForRowheaders)
-    .use(rewriteImgSources)
-    .use(rewriteAssetImgTags)
-    .use(rewriteLocalLinks, context)
-    .use(html)
+  return (
+    unified()
+      .use(process.env.COMMONMARK ? markdownNext : markdown)
+      .use(process.env.COMMONMARK ? gfm : null)
+      // Markdown AST below vvv
+      .use(parseInfoString)
+      .use(remarkCodeExtra, { transform: codeHeader })
+      .use(emoji)
+      // Markdown AST above ^^^
+      .use(remark2rehype, { allowDangerousHtml: true })
+      // HTML AST below vvv
+      .use(slug)
+      .use(useEnglishHeadings, context)
+      .use(headingLinks)
+      .use(annotate)
+      .use(highlight, {
+        languages: { graphql, dockerfile, http, groovy, erb, powershell },
+        subset: false,
+      })
+      .use(raw)
+      .use(wrapProceduralImages)
+      .use(rewriteTheadThScope)
+      .use(rewriteForRowheaders)
+      .use(rewriteImgSources)
+      .use(rewriteAssetImgTags)
+      .use(rewriteLocalLinks, context)
+      // HTML AST above ^^^
+      .use(html)
+    // String below vvv
+  )
 }
 
 export function createMinimalProcessor(context) {
diff --git a/lib/render-content/index.js b/lib/render-content/index.js
index f18519299d..10c74ee33e 100644
--- a/lib/render-content/index.js
+++ b/lib/render-content/index.js
@@ -5,13 +5,11 @@ import IndentedDataReference from '../liquid-tags/indented-data-reference.js'
 import Data from '../liquid-tags/data.js'
 import Octicon from '../liquid-tags/octicon.js'
 import Ifversion from '../liquid-tags/ifversion.js'
-import Annotate from '../liquid-tags/annotate.js'
 
 renderContent.liquid.registerTag('indented_data_reference', IndentedDataReference)
 renderContent.liquid.registerTag('data', Data)
 renderContent.liquid.registerTag('octicon', Octicon)
 renderContent.liquid.registerTag('ifversion', Ifversion)
-renderContent.liquid.registerTag('annotate', Annotate)
 
 for (const tag in tags) {
   // Register all the extended markdown tags, like {% note %} and {% warning %}
diff --git a/lib/render-content/plugins/annotate.js b/lib/render-content/plugins/annotate.js
new file mode 100644
index 0000000000..ba2d9e13de
--- /dev/null
+++ b/lib/render-content/plugins/annotate.js
@@ -0,0 +1,154 @@
+/*
+Parses fenced code blocks with `annotate` in info string.
+Results in single line comments split out, output format is:
+
+.annotate
+  .annotate-row (n)
+    .annotate-code
+    .annotate-note
+
+Contributing rules:
+- You must include `annotate` in the info string
+- You must include a language on the starting ` ``` ` tag.
+- Notes must start with one of: `#`, `//`, `<!--`, `%%`. (comment tag)
+- The comment tag style must match the language on the code fence.
+- Multiline-style comments, such as `/*` are not supported.
+- You can include any number of spaces before the comment tag starts.
+- You can include any number of spaces after the comment tag ends.
+- You can leave after the comment tag blank to create a blank annotation.
+- You cannot create a blank code block however.
+- Anything after the comment tag will be parsed with Markdown.
+- You can use any inline Markdown tag in the comment; recommend against using block tags such as headings, blockquote, horizontal rules, tables, lists, or code fences.
+- Multiple lines in row with the comment tag will result in a single annotation.
+- Empty lines, or lines that contain only space characters, will be discarded.
+- You must start the code section with a single line comment, otherwise the two will be flipped.
+- For HTML style, you can include a line after your annotations such as `<!-- -->` to maintain syntax highlighting; this will not impact what renders.
+
+`parse-info-string.js` plugin is required for this to work, and must come before `remark-rehype`.
+`annotate` must come before the `highlight` plugin.
+*/
+
+import yaml from 'js-yaml'
+import fs from 'fs'
+import { chunk, last } from 'lodash-es'
+import { visit } from 'unist-util-visit'
+import { h } from 'hastscript'
+import { fromMarkdown } from 'mdast-util-from-markdown'
+import { toHast } from 'mdast-util-to-hast'
+
+const languages = yaml.load(fs.readFileSync('./data/variables/code-languages.yml', 'utf8'))
+
+const commentRegexes = {
+  number: /^\s*#\s*/, // also known has hash or sharp; but the unicode name is "number sign"
+  slash: /^\s*\/\/\s*/,
+  xml: /^\s*<!--\s*/,
+  percent: /^\s*%%?\s*/,
+}
+
+const matcher = (node) =>
+  node.type === 'element' && node.tagName === 'pre' && getPreMeta(node).annotate
+
+export default function annotate() {
+  return (tree) => {
+    visit(tree, matcher, (node, index, parent) => {
+      parent.children[index] = createAnnotatedNode(node)
+    })
+  }
+}
+
+function createAnnotatedNode(node) {
+  const lang = node.children[0].properties.className[0].replace('language-', '')
+  const code = node.children[0].children[0].value
+
+  // Check the code is parse-able
+  validate(lang, code)
+
+  // Group into code and notes
+  const lines = code.split('\n').filter(hasChar)
+  const groups = chunkBy(lines, matchComment(lang))
+
+  // Group groups into rows
+  const rows = chunk(groups, 2)
+
+  // Render the HTML
+  return template({ lang, rows })
+}
+
+function validate(lang, code) {
+  if (!lang) {
+    throw new Error('No language specific for annotate info string')
+  }
+  if (!languages[lang]) {
+    throw new Error(
+      `Unsupported language for annotate info string. Please use one of: ${Object.keys(languages)}`
+    )
+  }
+  if (!new RegExp(getRegexp(lang), 'm').test(code)) {
+    throw new Error(
+      'Make sure the comment syntax matches the language. Use single-line comments only.'
+    )
+  }
+}
+
+function getRegexp(lang) {
+  return commentRegexes[languages[lang].comment]
+}
+
+function hasChar(line) {
+  return Boolean(line.trim())
+}
+
+function chunkBy(arr, predicate) {
+  const groups = [[]]
+  let on = predicate(arr[0])
+  for (const item of arr) {
+    if ((!on && predicate(item)) || (on && !predicate(item))) {
+      on = !on
+      groups.push([])
+    }
+    last(groups).push(item)
+  }
+  return groups
+}
+
+function matchComment(lang) {
+  const regex = getRegexp(lang)
+  return (line) => regex.test(line)
+}
+
+function template({ lang, rows }) {
+  return h(
+    'div',
+    { class: 'annotate' },
+    rows.map(([note, code]) =>
+      h('div', { className: 'annotate-row' }, [
+        h(
+          'div',
+          { className: 'annotate-code' },
+          // This tree matches the mdast -> hast tree of a regular fenced code block.
+          h('pre', h('code', { className: `language-${lang}` }, code.join('\n')))
+        ),
+        h(
+          'div',
+          { className: 'annotate-note' },
+          mdToHast(note.map(removeComment(lang)).join('\n'))
+        ),
+      ])
+    )
+  )
+}
+
+function mdToHast(text) {
+  return toHast(fromMarkdown(text))
+}
+
+function removeComment(lang) {
+  const regex = getRegexp(lang)
+  return (line) => line.replace(regex, '')
+}
+
+function getPreMeta(node) {
+  // Here's why this monstrosity works:
+  // https://github.com/syntax-tree/mdast-util-to-hast/blob/c87cd606731c88a27dbce4bfeaab913a9589bf83/lib/handlers/code.js#L40-L42
+  return node.children[0]?.data?.meta || {}
+}
diff --git a/lib/render-content/plugins/parse-info-string.js b/lib/render-content/plugins/parse-info-string.js
new file mode 100644
index 0000000000..920d3cdf6b
--- /dev/null
+++ b/lib/render-content/plugins/parse-info-string.js
@@ -0,0 +1,27 @@
+// Based on https://spec.commonmark.org/0.30/#info-string
+// Parse out info strings on fenced code blocks, example:
+// ```javascript lineNumbers:left copy:all annotate
+// becomes...
+// node.lang = javascript
+// node.meta = { lineNumbers: 'left', copy: 'all', annotate: true }
+
+import { visit } from 'unist-util-visit'
+
+const matcher = (node) => node.type === 'code' && node.lang && node.meta
+
+export default function parseInfoString() {
+  return (tree) => {
+    visit(tree, matcher, (node) => {
+      node.meta = strToObj(node.meta)
+    })
+  }
+}
+
+function strToObj(str) {
+  return Object.fromEntries(
+    str
+      .split(/\s+/g)
+      .map((k) => k.split(':'))
+      .map(([k, ...v]) => [k, v.length ? v.join(':') : true])
+  )
+}
diff --git a/package-lock.json b/package-lock.json
index dfbc46c206..d65fcc3508 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,6 +57,7 @@
         "lodash-es": "^4.17.21",
         "lowdb": "6.0.0",
         "mdast-util-from-markdown": "^1.2.0",
+        "mdast-util-to-hast": "^12.3.0",
         "mdast-util-to-markdown": "1.5.0",
         "mdast-util-to-string": "^3.1.0",
         "morgan": "^1.10.0",
@@ -4544,10 +4545,6 @@
         "@types/unist": "*"
       }
     },
-    "node_modules/@types/mdurl": {
-      "version": "1.0.2",
-      "license": "MIT"
-    },
     "node_modules/@types/minimatch": {
       "version": "3.0.5",
       "license": "MIT"
@@ -13985,16 +13982,15 @@
       }
     },
     "node_modules/mdast-util-to-hast": {
-      "version": "12.1.1",
-      "license": "MIT",
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-12.3.0.tgz",
+      "integrity": "sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==",
       "dependencies": {
         "@types/hast": "^2.0.0",
         "@types/mdast": "^3.0.0",
-        "@types/mdurl": "^1.0.0",
         "mdast-util-definitions": "^5.0.0",
-        "mdurl": "^1.0.0",
-        "micromark-util-sanitize-uri": "^1.0.0",
-        "unist-builder": "^3.0.0",
+        "micromark-util-sanitize-uri": "^1.1.0",
+        "trim-lines": "^3.0.0",
         "unist-util-generated": "^2.0.0",
         "unist-util-position": "^4.0.0",
         "unist-util-visit": "^4.0.0"
@@ -14032,6 +14028,7 @@
     },
     "node_modules/mdurl": {
       "version": "1.0.1",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/media-typer": {
@@ -14508,7 +14505,9 @@
       }
     },
     "node_modules/micromark-util-sanitize-uri": {
-      "version": "1.0.0",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz",
+      "integrity": "sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==",
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -14519,7 +14518,6 @@
           "url": "https://opencollective.com/unified"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "micromark-util-character": "^1.0.0",
         "micromark-util-encode": "^1.0.0",
@@ -18121,6 +18119,15 @@
         "nodetouch": "bin/nodetouch.js"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/trim-trailing-lines": {
       "version": "1.1.4",
       "license": "MIT",
@@ -18387,17 +18394,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/unist-builder": {
-      "version": "3.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/unist-util-find-after": {
       "version": "4.0.0",
       "license": "MIT",
@@ -22251,9 +22247,6 @@
         "@types/unist": "*"
       }
     },
-    "@types/mdurl": {
-      "version": "1.0.2"
-    },
     "@types/minimatch": {
       "version": "3.0.5"
     },
@@ -28816,15 +28809,15 @@
       }
     },
     "mdast-util-to-hast": {
-      "version": "12.1.1",
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-12.3.0.tgz",
+      "integrity": "sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==",
       "requires": {
         "@types/hast": "^2.0.0",
         "@types/mdast": "^3.0.0",
-        "@types/mdurl": "^1.0.0",
         "mdast-util-definitions": "^5.0.0",
-        "mdurl": "^1.0.0",
-        "micromark-util-sanitize-uri": "^1.0.0",
-        "unist-builder": "^3.0.0",
+        "micromark-util-sanitize-uri": "^1.1.0",
+        "trim-lines": "^3.0.0",
         "unist-util-generated": "^2.0.0",
         "unist-util-position": "^4.0.0",
         "unist-util-visit": "^4.0.0"
@@ -28847,7 +28840,8 @@
       "version": "3.1.0"
     },
     "mdurl": {
-      "version": "1.0.1"
+      "version": "1.0.1",
+      "dev": true
     },
     "media-typer": {
       "version": "0.3.0"
@@ -29088,7 +29082,9 @@
       }
     },
     "micromark-util-sanitize-uri": {
-      "version": "1.0.0",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz",
+      "integrity": "sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==",
       "requires": {
         "micromark-util-character": "^1.0.0",
         "micromark-util-encode": "^1.0.0",
@@ -31320,6 +31316,11 @@
         "nopt": "~1.0.10"
       }
     },
+    "trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg=="
+    },
     "trim-trailing-lines": {
       "version": "1.1.4"
     },
@@ -31491,12 +31492,6 @@
         }
       }
     },
-    "unist-builder": {
-      "version": "3.0.0",
-      "requires": {
-        "@types/unist": "^2.0.0"
-      }
-    },
     "unist-util-find-after": {
       "version": "4.0.0",
       "requires": {
diff --git a/package.json b/package.json
index 28bd3c0daf..0a1ad992c3 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,7 @@
     "lodash-es": "^4.17.21",
     "lowdb": "6.0.0",
     "mdast-util-from-markdown": "^1.2.0",
+    "mdast-util-to-hast": "^12.3.0",
     "mdast-util-to-markdown": "1.5.0",
     "mdast-util-to-string": "^3.1.0",
     "morgan": "^1.10.0",
diff --git a/tests/rendering/__snapshots__/annotate.js.snap b/tests/rendering/__snapshots__/annotate.js.snap
index be4e39c2e6..025f289616 100644
--- a/tests/rendering/__snapshots__/annotate.js.snap
+++ b/tests/rendering/__snapshots__/annotate.js.snap
@@ -1,27 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`annotate renders annotations 1`] = `
-"<div class="annotate">
-<div class="annotate-row">
-<div class="annotate-code">
-<pre><code class="hljs language-yaml"><span class="hljs-attr">name:</span> <span class="hljs-string">Post</span> <span class="hljs-string">welcome</span> <span class="hljs-string">comment</span>
-</code></pre>
-</div>
-<div class="annotate-note">
-<p>The name of the workflow as it will appear in the "Actions" tab of the GitHub repository.</p>
-</div>
-</div>
-<div class="annotate-row">
-<div class="annotate-code">
-<pre><code class="hljs language-yaml"><span class="hljs-attr">on:</span>
+"<div class="annotate"><div class="annotate-row"><div class="annotate-code"><pre><code class="hljs language-yaml"><span class="hljs-attr">name:</span> <span class="hljs-string">Post</span> <span class="hljs-string">welcome</span> <span class="hljs-string">comment</span></code></pre></div><div class="annotate-note"><p>The name of the workflow as it will appear in the "Actions" tab of the GitHub repository.</p></div></div><div class="annotate-row"><div class="annotate-code"><pre><code class="hljs language-yaml"><span class="hljs-attr">on:</span>
   <span class="hljs-attr">pull_request:</span>
-    <span class="hljs-attr">types:</span> [<span class="hljs-string">opened</span>]
-</code></pre>
-</div>
-<div class="annotate-note">
-<p>Add the <code>pull_request</code> event, so that the workflow runs automatically
-every time a pull request is created.</p>
-</div>
-</div>
-</div>"
+    <span class="hljs-attr">types:</span> [<span class="hljs-string">opened</span>]</code></pre></div><div class="annotate-note"><p>Add the <code>pull_request</code> event, so that the workflow runs automatically
+every time a pull request is created.</p></div></div></div>"
 `;
diff --git a/tests/rendering/annotate.js b/tests/rendering/annotate.js
index 447cd687e0..3357582c27 100644
--- a/tests/rendering/annotate.js
+++ b/tests/rendering/annotate.js
@@ -1,9 +1,7 @@
 import renderContent from '../../lib/render-content/index.js'
 
 const example = `
-{% annotate %}
-
-\`\`\`yaml
+\`\`\`yaml annotate
 # The name of the workflow as it will appear in the "Actions" tab of the GitHub repository.
 name: Post welcome comment
 
@@ -13,8 +11,6 @@ on:
   pull_request:
     types: [opened]
 \`\`\`
-
-{% endannotate %}
 `
 
 describe('annotate', () => {