diff --git a/config/_default/menus/menus.en.toml b/config/_default/menus/menus.en.toml
index 3f4e76879..aac432fab 100644
--- a/config/_default/menus/menus.en.toml
+++ b/config/_default/menus/menus.en.toml
@@ -55,20 +55,26 @@ identifier = 'render-hooks'
 pageRef = '/render-hooks/'
 
 [[docs]]
-name = 'Hugo Modules'
+name = 'Shortcodes'
 weight = 100
+identifier = 'shortcodes'
+pageRef = '/shortcodes/'
+
+[[docs]]
+name = 'Hugo Modules'
+weight = 110
 identifier = 'modules'
 pageRef = '/hugo-modules/'
 
 [[docs]]
 name = 'Hugo Pipes'
-weight = 110
+weight = 120
 identifier = 'hugo-pipes'
 pageRef = '/hugo-pipes/'
 
 [[docs]]
 name = 'CLI'
-weight = 120
+weight = 130
 post = 'break'
 identifier = 'commands'
 pageRef = '/commands/'
@@ -77,25 +83,25 @@ pageRef = '/commands/'
 
 [[docs]]
 name = 'Troubleshooting'
-weight = 130
+weight = 140
 identifier = 'troubleshooting'
 pageRef = '/troubleshooting/'
 
 [[docs]]
 name = 'Developer tools'
-weight = 140
+weight = 150
 identifier = 'developer-tools'
 pageRef = '/tools/'
 
 [[docs]]
 name = 'Hosting and deployment'
-weight = 150
+weight = 160
 identifier = 'hosting-and-deployment'
 pageRef = '/hosting-and-deployment/'
 
 [[docs]]
 name = 'Contribute'
-weight = 160
+weight = 170
 post = 'break'
 identifier = 'contribute'
 pageRef = '/contribute/'
diff --git a/content/en/content-management/shortcodes.md b/content/en/content-management/shortcodes.md
index a486f0c8f..cd1f2cb43 100644
--- a/content/en/content-management/shortcodes.md
+++ b/content/en/content-management/shortcodes.md
@@ -72,555 +72,7 @@ You can call shortcodes within other shortcodes by creating your own templates t
 
 ## Embedded shortcodes
 
-Use these embedded shortcodes as needed.
-
-### comment
-
-{{< new-in "0.137.1" >}}
-
-{{% note %}}
-To override Hugo's embedded `comment` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
-[source code]: {{% eturl comment %}}
-{{% /note %}}
-
-Use the `comment` shortcode to include comments in your Markdown. Hugo excludes the encapsulated text when rendering your site.
-
-Example usage:
-
-```text
-{{%/* comment */%}} TODO: rewrite the paragraph below. {{%/* /comment */%}}
-```
-
-Although you can call this shortcode using the `{{</* */>}}` notation, computationally it is more efficient to call it using the `{{%/* */%}}` notation as shown above.
-
-### details
-
-{{< new-in 0.140.0 >}}
-
-{{% note %}}
-To override Hugo's embedded `details` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
-[source code]: {{% eturl details %}}
-{{% /note %}}
-
-Use the `details` shortcode to create a `details` HTML element. For example:
-
-```text
-{{</* details summary="See the details" */>}}
-This is a **bold** word.
-{{</* /details */>}}
-```
-
-Hugo renders this to:
-
-```html
-<details>
-  <summary>See the details</summary>
-  <p>This is a <strong>bold</strong> word.</p>
-</details>
-```
-
-The `details` shortcode accepts these named arguments:
-
-summary
-: (`string`) The content of the child `summary` element rendered from Markdown to HTML. Default is `Details`.
-
-open
-: (`bool`) Whether to initially display the content of the `details` element. Default is `false`.
-
-class
-: (`string`) The value of the element's `class` attribute.
-
-name
-: (`string`) The value of the element's `name` attribute.
-
-title
-: (`string`) The value of the element's `title` attribute.
-
-### figure
-
-{{% note %}}
-To override Hugo's embedded `figure` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
-[source code]: {{% eturl figure %}}
-{{% /note %}}
-
-The `figure` shortcode can use the following named arguments:
-
-src
-: URL of the image to be displayed.
-
-link
-: If the image needs to be hyperlinked, URL of the destination.
-
-target
-: Optional `target` attribute for the URL if `link` argument is set.
-
-rel
-: Optional `rel` attribute for the URL if `link` argument is set.
-
-alt
-: Alternate text for the image if the image cannot be displayed.
-
-title
-: Image title.
-
-caption
-: Image caption. Markdown within the value of `caption` will be rendered.
-
-class
-: `class` attribute of the HTML `figure` tag.
-
-height
-: `height` attribute of the image.
-
-width
-: `width` attribute of the image.
-
-loading
-: `loading` attribute of the image.
-
-attr
-: Image attribution text. Markdown within the value of `attr` will be rendered.
-
-attrlink
-: If the attribution text needs to be hyperlinked, URL of the destination.
-
-Example usage:
-
-```text
-{{</* figure src="elephant.jpg" title="An elephant at sunset" */>}}
-```
-
-Rendered:
-
-```html
-<figure>
-  <img src="elephant.jpg">
-  <figcaption><h4>An elephant at sunset</h4></figcaption>
-</figure>
-```
-
-### gist
-
-{{% note %}}
-To override Hugo's embedded `gist` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
-[source code]: {{% eturl gist %}}
-{{% /note %}}
-
-To display a GitHub [gist] with this URL:
-
-[gist]: https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists
-
-```text
-https://gist.github.com/user/50a7482715eac222e230d1e64dd9a89b
-```
-
-Include this in your Markdown:
-
-```text
-{{</* gist user 50a7482715eac222e230d1e64dd9a89b */>}}
-```
-
-This will display all files in the gist alphabetically by file name.
-
-{{< gist jmooring 23932424365401ffa5e9d9810102a477 >}}
-
-To display a specific file within the gist:
-
-```text
-{{</* gist user 23932424365401ffa5e9d9810102a477 list.html */>}}
-```
-
-Rendered:
-
-{{< gist jmooring 23932424365401ffa5e9d9810102a477 list.html >}}
-
-### highlight
-
-{{% note %}}
-To override Hugo's embedded `highlight` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
-[source code]: {{% eturl highlight %}}
-{{% /note %}}
-
-To display a highlighted code sample:
-
-```text
-{{</* highlight go-html-template */>}}
-{{ range .Pages }}
-  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-{{ end }}
-{{</* /highlight */>}}
-```
-
-Rendered:
-
-{{< highlight go-html-template >}}
-{{ range .Pages }}
-  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-{{ end }}
-{{< /highlight >}}
-
-To specify one or more [highlighting options], include a quotation-encapsulated, comma-separated list:
-
-[highlighting options]: /functions/transform/highlight/
-
-```text
-{{</* highlight go-html-template "lineNos=inline, lineNoStart=42" */>}}
-{{ range .Pages }}
-  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-{{ end }}
-{{</* /highlight */>}}
-```
-
-Rendered:
-
-{{< highlight go-html-template "lineNos=inline, lineNoStart=42" >}}
-{{ range .Pages }}
-  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-{{ end }}
-{{< /highlight >}}
-
-### instagram
-
-{{% note %}}
-To override Hugo's embedded `instagram` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
-[source code]: {{% eturl instagram %}}
-{{% /note %}}
-
-To display an Instagram post with this URL:
-
-```text
-https://www.instagram.com/p/CxOWiQNP2MO/
-```
-
-Include this in your Markdown:
-
-```text
-{{</* instagram CxOWiQNP2MO */>}}
-```
-
-Rendered:
-
-{{< instagram CxOWiQNP2MO >}}
-
-### param
-
-{{% note %}}
-To override Hugo's embedded `param` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
-[source code]: {{% eturl param %}}
-{{% /note %}}
-
-The `param` shortcode renders a parameter from the page's front matter, falling back to a site parameter of the same name. The shortcode throws an error if the parameter does not exist.
-
-Example usage:
-
-```text
-{{</* param testparam */>}}
-```
-
-Access nested values by [chaining] the [identifiers]:
-
-[chaining]: /getting-started/glossary/#chain
-[identifiers]: /getting-started/glossary/#identifier
-
-```text
-{{</* param my.nested.param */>}}
-```
-
-### qr
-
-{{% note %}}
-To override Hugo's embedded `qr` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
-[source code]: {{% eturl qr %}}
-{{% /note %}}
-
-The `qr` shortcode encodes the given text into a [QR code] using the specified options and renders the resulting image.
-
-[QR code]: https://en.wikipedia.org/wiki/QR_code
-
-Use the self-closing syntax to pass the text as an argument:
-
-```text
-{{</* qr text="https://gohugo.io" /*/>}}
-```
-
-Or insert the text between the opening and closing tags:
-
-```text
-{{</* qr */>}}
-https://gohugo.io
-{{</* /qr */>}}
-```
-
-Both of the above produce this image:
-
-{{< qr text="https://gohugo.io" class="qrcode" />}}
-
-To create a QR code for a phone number:
-
-```text
-{{</* qr text="tel:+12065550101" /*/>}}
-```
-
-{{< qr text="tel:+12065550101" class="qrcode" />}}
-
-To create a QR code containing contact information in the [vCard] format:
-
-[vCard]: https://en.wikipedia.org/wiki/VCard
-
-```text
-{{</* qr level="low" scale=2 alt="QR code of vCard for John Smith" */>}}
-BEGIN:VCARD
-VERSION:2.1
-N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD
-FN;CHARSET=UTF-8:Dr. John R. Smith, PhD.
-ORG;CHARSET=UTF-8:ABC Widgets
-TITLE;CHARSET=UTF-8:Vice President Engineering
-TEL;TYPE=WORK:+12065550101
-EMAIL;TYPE=WORK:jsmith@example.org
-END:VCARD
-{{</* /qr */>}}
-```
-
-{{< qr level="low" scale=2 alt="QR code of vCard for John Smith" class="qrcode" >}}
-BEGIN:VCARD
-VERSION:2.1
-N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD
-FN;CHARSET=UTF-8:Dr. John R. Smith, PhD.
-ORG;CHARSET=UTF-8:ABC Widgets
-TITLE;CHARSET=UTF-8:Vice President Engineering
-TEL;TYPE=WORK:+12065550101
-EMAIL;TYPE=WORK:jsmith@example.org
-END:VCARD
-{{< /qr >}}
-
-Internally this shortcode calls the `images.QR` function. Please read the [related documentation] for implementation details and guidance.
-
-[related documentation]: /functions/images/qr/
-
-The `qr` shortcode accepts these named arguments:
-
-text
-: (`string`) The text to encode, falling back to the text between the opening and closing shortcode tags.
-
-level
-: (`string`) The error correction level to use when encoding the text, one of `low`, `medium`, `quartile`, or `high`. Default is `medium`.
-
-scale
-: (`int`) The number of image pixels per QR code module. Must be greater than or equal to 2. Default is `4`.
-
-targetDir
-: (`string`) The subdirectory within the [`publishDir`] where Hugo will place the generated image.
-
-[`publishDir`]: /getting-started/configuration/#publishdir
-
-alt
-: (`string`) The `alt` attribute of the `img` element.
-
-class
-: (`string`) The `class` attribute of the `img` element.
-
-id
-: (`string`) The `id` attribute of the `img` element.
-
-title
-: (`string`) The `title` attribute of the `img` element.
-
-### ref
-
-{{% note %}}
-To override Hugo's embedded `ref` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
-Always use the `{{%/* */%}}` notation when calling this shortcode.
-
-[source code]: {{% eturl ref %}}
-{{% /note %}}
-
-The `ref` shortcode returns the permalink of the given page reference.
-
-Example usage:
-
-```text
-[Post 1]({{%/* ref "/posts/post-1" */%}})
-[Post 1]({{%/* ref "/posts/post-1.md" */%}})
-[Post 1]({{%/* ref "/posts/post-1#foo" */%}})
-[Post 1]({{%/* ref "/posts/post-1.md#foo" */%}})
-```
-
-Rendered:
-
-```html
-<a href="http://example.org/posts/post-1/">Post 1</a>
-<a href="http://example.org/posts/post-1/">Post 1</a>
-<a href="http://example.org/posts/post-1/#foo">Post 1</a>
-<a href="http://example.org/posts/post-1/#foo">Post 1</a>
-```
-
-### relref
-
-{{% note %}}
-To override Hugo's embedded `relref` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
-Always use the `{{%/* */%}}` notation when calling this shortcode.
-
-[source code]: {{% eturl relref %}}
-{{% /note %}}
-
-The `relref` shortcode returns the permalink of the given page reference.
-
-Example usage:
-
-```text
-[Post 1]({{%/* relref "/posts/post-1" */%}})
-[Post 1]({{%/* relref "/posts/post-1.md" */%}})
-[Post 1]({{%/* relref "/posts/post-1#foo" */%}})
-[Post 1]({{%/* relref "/posts/post-1.md#foo" */%}})
-```
-
-Rendered:
-
-```html
-<a href="/posts/post-1/">Post 1</a>
-<a href="/posts/post-1/">Post 1</a>
-<a href="/posts/post-1/#foo">Post 1</a>
-<a href="/posts/post-1/#foo">Post 1</a>
-```
-
-### twitter
-
-{{% note %}}
-To override Hugo's embedded `twitter` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
-[source code]: {{% eturl twitter %}}
-{{% /note %}}
-
-To display a Twitter post with this URL:
-
-```txt
-https://x.com/SanDiegoZoo/status/1453110110599868418
-```
-
-Include this in your Markdown:
-
-```text
-{{</* twitter user="SanDiegoZoo" id="1453110110599868418" */>}}
-```
-
-Rendered:
-
-{{< twitter user="SanDiegoZoo" id="1453110110599868418" >}}
-
-### vimeo
-
-{{% note %}}
-To override Hugo's embedded `vimeo` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
-[source code]: {{% eturl vimeo %}}
-{{% /note %}}
-
-To display a Vimeo video with this URL:
-
-```text
-https://vimeo.com/channels/staffpicks/55073825
-```
-
-Include this in your Markdown:
-
-```text
-{{</* vimeo 55073825 */>}}
-```
-
-Rendered:
-
-{{< vimeo 55073825 >}}
-
-{{% note %}}
-If you want to further customize the visual styling, add a `class` argument when calling the shortcode. The new `class` will be added to the `<div>` that wraps the `<iframe>` *and* will remove the inline styles. Note that you will need to call the `id` as a named argument as well. You can also give the vimeo video a descriptive title with `title`.
-
-```go
-{{</* vimeo id="146022717" class="my-vimeo-wrapper-class" title="My vimeo video" */>}}
-```
-{{% /note %}}
-
-### youtube
-
-{{% note %}}
-To override Hugo's embedded `youtube` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
-[source code]: {{% eturl youtube %}}
-{{% /note %}}
-
-To display a YouTube video with this URL:
-
-```text
-https://www.youtube.com/watch?v=0RKpf3rK57I
-```
-
-Include this in your Markdown:
-
-```text
-{{</* youtube 0RKpf3rK57I */>}}
-```
-
-Rendered:
-
-{{< youtube 0RKpf3rK57I >}}
-
-The youtube shortcode accepts these named arguments:
-
-id
-: (`string`) The video `id`. Optional if the `id` is provided as a positional argument as shown in the example above.
-
-allowFullScreen
-{{< new-in 0.125.0 >}}
-: (`bool`) Whether the `iframe` element can activate full screen mode. Default is `true`.
-
-autoplay
- {{< new-in 0.125.0 >}}
-: (`bool`) Whether to automatically play the video. Forces `mute` to `true`. Default is `false`.
-
-class
-: (`string`) The `class` attribute of the wrapping `div` element. When specified, removes the `style` attributes from the `iframe` element and its wrapping `div` element.
-
-controls
-{{< new-in 0.125.0 >}}
-: (`bool`) Whether to display the video controls. Default is `true`.
-
-end
-{{< new-in 0.125.0 >}}
-: (`int`) The time, measured in seconds from the start of the video, when the player should stop playing the video.
-
-loading
-{{< new-in 0.125.0 >}}
-: (`string`) The loading attribute of the `iframe` element, either `eager` or `lazy`. Default is `eager`.
-
-loop
-{{< new-in 0.125.0 >}}
-: (`bool`) Whether to indefinitely repeat the video. Ignores the `start` and `end` arguments after the first play.  Default is `false`.
-
-mute
-{{< new-in 0.125.0 >}}
-: (`bool`) Whether to mute the video. Always `true` when `autoplay` is `true`. Default is `false`.
-
-start
-{{< new-in 0.125.0 >}}
-: (`int`) The time, measured in seconds from the start of the video, when the player should start playing the video.
-
-title
-: (`string`) The `title` attribute of the `iframe` element. Defaults to "YouTube video".
-
-Example using some of the above:
-
-```text
-{{</* youtube id=0RKpf3rK57I start=30 end=60 loading=lazy */>}}
-```
+See the [shortcodes](/shortcodes/) section.
 
 ## Privacy configuration
 
diff --git a/content/en/content-management/syntax-highlighting.md b/content/en/content-management/syntax-highlighting.md
index bdc81536a..b3e991a96 100644
--- a/content/en/content-management/syntax-highlighting.md
+++ b/content/en/content-management/syntax-highlighting.md
@@ -32,7 +32,7 @@ Run `hugo gen chromastyles -h` for more options. See https://xyproto.github.io/s
 
 ## Highlight shortcode
 
-Highlighting is carried out via the built-in [`highlight` shortcode](/content-management/shortcodes/#highlight). It takes exactly one required argument for the programming language to be highlighted and requires a closing tag.
+Highlighting is carried out via the built-in [`highlight` shortcode](/shortcodes/highlight/). It takes exactly one required argument for the programming language to be highlighted and requires a closing tag.
 
 Options:
 
diff --git a/content/en/functions/_common/highlighting-options.md b/content/en/functions/_common/highlighting-options.md
new file mode 100644
index 000000000..90f3784c0
--- /dev/null
+++ b/content/en/functions/_common/highlighting-options.md
@@ -0,0 +1,59 @@
+---
+_comment: Do not remove front matter.
+---
+
+anchorLineNos
+: (`bool`) Whether to render each line number as an HTML anchor element, setting the `id` attribute of the surrounding `span` element to the line number. Irrelevant if `lineNos` is `false`. Default is `false`.
+
+codeFences
+: (`bool`) Whether to highlight fenced code blocks. Default is `true`.
+
+guessSyntax
+: (`bool`) Whether to automatically detect the language if the `LANG` argument is blank or set to a language for which there is no corresponding [lexer]. Falls back to a plain text lexer if unable to automatically detect the language. Default is `false`.
+
+[lexer]: /getting-started/glossary/#lexer
+
+{{% note %}}
+The Chroma syntax highlighter includes lexers for approximately 250 languages, but only 5 of these have implemented automatic language detection.
+{{% /note %}}
+
+hl_Lines
+: (`string`) A space-delimited list of lines to emphasize within the highlighted code. To emphasize lines 2, 3, 4, and 7, set this value to `2-4 7`. This option is independent of the `lineNoStart` option.
+
+hl_inline
+: (`bool`) Whether to render the highlighted code without a wrapping container. Default is `false`.
+
+lineAnchors
+: (`string`) When rendering a line number as an HTML anchor element, prepend this value to the `id` attribute of the surrounding `span` element. This provides unique `id` attributes when a page contains two or more code blocks. Irrelevant if `lineNos` or `anchorLineNos` is `false`.
+
+lineNoStart
+: (`int`) The number to display at the beginning of the first line. Irrelevant if `lineNos` is `false`. Default is `1`.
+
+lineNos
+: (`bool`) Whether to display a number at the beginning of each line. Default is `false`.
+
+lineNumbersInTable
+: (`bool`) Whether to render the highlighted code in an HTML table with two cells. The left table cell contains the line numbers, while the right table cell contains the code. Irrelevant if `lineNos` is `false`. Default is `true`.
+
+noClasses
+: (`bool`) Whether to use inline CSS styles instead of an external CSS file. To use an external CSS file, set this value to `false` and generate the CSS file using the `hugo gen chromastyles` command. Default is `true`.
+
+style
+: (`string`) The CSS styles to apply to the highlighted code. See the [style gallery] for examples. Case-sensitive. Default is `monokai`.
+
+tabWidth
+: (`int`) Substitute this number of spaces for each tab character in your highlighted code. Irrelevant if `noClasses` is `false`. Default is `4`.
+
+wrapperClass
+{{< new-in 0.140.2 >}}
+: (`string`) The class or classes to use for the outermost element of the highlighted code. Default is `highlight`.
+
+{{% note %}}
+Instead of specifying both `lineNos` and `lineNumbersInTable`, you can use the following shorthand notation:
+
+lineNos=inline
+: equivalent to `lineNos=true` and `lineNumbersInTable=false`
+
+lineNos=table
+: equivalent to `lineNos=true` and `lineNumbersInTable=true`
+{{% /note %}}
diff --git a/content/en/functions/images/QR.md b/content/en/functions/images/QR.md
index 9d58e7163..1e8783d05 100644
--- a/content/en/functions/images/QR.md
+++ b/content/en/functions/images/QR.md
@@ -109,4 +109,4 @@ https://gohugo.io
 
 The `qr` shortcode accepts several arguments including `level` and `scale`. See the [related documentation] for details.
 
-[related documentation]: /content-management/shortcodes/#qr
+[related documentation]: /shortcodes/qr/
diff --git a/content/en/functions/transform/Highlight.md b/content/en/functions/transform/Highlight.md
index 8fa6719eb..5eaa53939 100644
--- a/content/en/functions/transform/Highlight.md
+++ b/content/en/functions/transform/Highlight.md
@@ -9,81 +9,31 @@ action:
     - functions/transform/CanHighlight
     - functions/transform/HighlightCodeBlock
   returnType: template.HTML
-  signatures: ['transform.Highlight INPUT LANG [OPTIONS]']
+  signatures: ['transform.Highlight CODE LANG [OPTIONS]']
 aliases: [/functions/highlight]
 toc: true
 ---
 
-The `highlight` function uses the [Chroma] syntax highlighter, supporting over 200 languages with more than 40 available styles.
+The `highlight` function uses the [Chroma] syntax highlighter, supporting over 200 languages with more than 40 [available styles].
+
+[chroma]: https://github.com/alecthomas/chroma
+[available styles]: https://xyproto.github.io/splash/docs/
 
 ## Arguments
 
-INPUT
-: The code to highlight.
+The `transform.Highlight` shortcode takes three arguments.
+
+CODE
+: (`string`) The code to highlight.
 
 LANG
-: The language of the code to highlight. Choose from one of the [supported languages]. Case-insensitive.
+: (`string`) The language of the code to highlight. Choose from one of the [supported languages]. This value is case-insensitive.
 
 OPTIONS
-: A map or comma-separated list of zero or more options. Set default values in [site configuration].
+: (`map or string`) A map or space-separate key-value pairs wrapped in quotation marks. Set default values for each option in your [site configuration]. The key names are case-insensitive.
 
-## Options
-
-anchorLineNos
-: (`bool`) Whether to render each line number as an HTML anchor element, setting the `id` attribute of the surrounding `span` element to the line number. Irrelevant if `lineNos` is `false`. Default is `false`.
-
-codeFences
-: (`bool`) Whether to highlight fenced code blocks. Default is `true`.
-
-guessSyntax
-: (`bool`) Whether to automatically detect the language if the `LANG` argument is blank or set to a language for which there is no corresponding [lexer]. Falls back to a plain text lexer if unable to automatically detect the language. Default is `false`.
-
-[lexer]: /getting-started/glossary/#lexer
-
-{{% note %}}
-The Chroma syntax highlighter includes lexers for approximately 250 languages, but only 5 of these have implemented automatic language detection.
-{{% /note %}}
-
-hl_Lines
-: (`string`) A space-delimited list of lines to emphasize within the highlighted code. To emphasize lines 2, 3, 4, and 7, set this value to `2-4 7`. This option is independent of the `lineNoStart` option.
-
-hl_inline
-: (`bool`) Whether to render the highlighted code without a wrapping container.Default is `false`.
-
-lineAnchors
-: (`string`) When rendering a line number as an HTML anchor element, prepend this value to the `id` attribute of the surrounding `span` element. This provides unique `id` attributes when a page contains two or more code blocks. Irrelevant if `lineNos` or `anchorLineNos` is `false`.
-
-lineNoStart
-: (`int`) The number to display at the beginning of the first line. Irrelevant if `lineNos` is `false`. Default is `1`.
-
-lineNos
-: (`bool`) Whether to display a number at the beginning of each line. Default is `false`.
-
-lineNumbersInTable
-: (`bool`) Whether to render the highlighted code in an HTML table with two cells. The left table cell contains the line numbers, while the right table cell contains the code. Irrelevant if `lineNos` is `false`. Default is `true`.
-
-noClasses
-: (`bool`) Whether to use inline CSS styles instead of an external CSS file. To use an external CSS file, set this value to `false` and generate the CSS file using the `hugo gen chromastyles` command. Default is `true`.
-
-style
-: (`string`) The CSS styles to apply to the highlighted code. See the [style gallery] for examples. Case-sensitive. Default is `monokai`.
-
-tabWidth
-: (`int`) Substitute this number of spaces for each tab character in your highlighted code. Irrelevant if `noClasses` is `false`. Default is `4`.
-
-wrapperClass
-{{< new-in 0.140.2 >}}
-: (`string`) The class or classes to use for the outermost element of the highlighted code. Default is `highlight`.
-
-{{% note %}}
-Instead of specifying both `lineNos` and `lineNumbersInTable`, you can use the following shorthand notation:
-
-lineNos=inline
-: equivalent to `lineNos=true` and `lineNumbersInTable=false`
-
-lineNos=table
-: equivalent to `lineNos=true` and `lineNumbersInTable=true`
-{{% /note %}}
+[site configuration]: /getting-started/configuration-markup#highlight
+[supported languages]: /content-management/syntax-highlighting#list-of-chroma-highlighting-languages
 
 ## Examples
 
@@ -101,7 +51,6 @@ lineNos=table
 {{ transform.Highlight $input $lang $opts }}
 ```
 
-[Chroma]: https://github.com/alecthomas/chroma
-[site configuration]: /getting-started/configuration-markup#highlight
-[style gallery]: https://xyproto.github.io/splash/docs/
-[supported languages]: /content-management/syntax-highlighting#list-of-chroma-highlighting-languages
+## Options
+
+{{% include "functions/_common/highlighting-options" %}}
diff --git a/content/en/methods/page/Path.md b/content/en/methods/page/Path.md
index b65120d4d..0082947f7 100644
--- a/content/en/methods/page/Path.md
+++ b/content/en/methods/page/Path.md
@@ -112,8 +112,8 @@ Methods|Functions|Shortcodes
 [`urls.RelRef`]: /functions/urls/relref/
 [`Page.GetPage`]: /methods/page/getpage/
 [`Site.GetPage`]: /methods/site/getpage/
-[`ref`]: /content-management/shortcodes/#ref
-[`relref`]: /content-management/shortcodes/#relref
+[`ref`]: /shortcodes/ref/
+[`relref`]: /shortcodes/relref/
 [`Page.Ref`]: /methods/page/ref/
 [`Page.RelRef`]: /methods/page/relref/
 [`Shortcode.Ref`]: /methods/shortcode/ref
diff --git a/content/en/shortcodes/_index.md b/content/en/shortcodes/_index.md
new file mode 100644
index 000000000..e525ef5ef
--- /dev/null
+++ b/content/en/shortcodes/_index.md
@@ -0,0 +1,16 @@
+---
+title: Shortcodes
+linkTitle: In this section
+description: Insert elements such as videos, images, and social media embeds into your content using Hugo's embedded shortcodes.
+categories: []
+keywords: []
+menu:
+  docs:
+    identifier: shortcodes-in-this-section
+    parent: shortcodes
+    weight: 10
+weight: 10
+showSectionMenu: true
+---
+
+Insert elements such as videos, images, and social media embeds into your content using Hugo's embedded shortcodes.
diff --git a/content/en/shortcodes/comment.md b/content/en/shortcodes/comment.md
new file mode 100755
index 000000000..bb5d04e71
--- /dev/null
+++ b/content/en/shortcodes/comment.md
@@ -0,0 +1,38 @@
+---
+title: Comment
+description: Include hidden comments in your content with the comment shortcode.
+categories: [shortcodes]
+keywords: []
+menu:
+  docs:
+    identifier: shortcodes-comment
+    parent: shortcodes
+    weight:
+weight:
+---
+
+{{% note %}}
+To override Hugo's embedded `comment` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
+
+[source code]: {{% eturl comment %}}
+{{% /note %}}
+
+{{< new-in "0.137.1" >}}
+
+Use the `comment` shortcode to include comments in your content. Hugo will ignore the text within these comments when rendering your site.
+
+Use it inline:
+
+```text
+{{%/* comment */%}} TODO: rewrite the paragraph below. {{%/* /comment */%}}
+```
+
+Or as a block comment:
+
+```text
+{{%/* comment */%}}
+TODO: rewrite the paragraph below.
+{{%/* /comment */%}}
+```
+
+Although you can call this shortcode using the `{{</* */>}}` notation, computationally it is more efficient to call it using the `{{%/* */%}}` notation as shown above.
diff --git a/content/en/shortcodes/details.md b/content/en/shortcodes/details.md
new file mode 100755
index 000000000..7aa6e56d2
--- /dev/null
+++ b/content/en/shortcodes/details.md
@@ -0,0 +1,80 @@
+---
+title: Details
+description: Insert an HTML details element into your content using the details shortcode.
+categories: [shortcodes]
+keywords: []
+menu:
+  docs:
+    parent: shortcodes
+    weight:
+weight:
+toc: true
+---
+
+{{< new-in 0.140.0 >}}
+
+{{% note %}}
+To override Hugo's embedded `details` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
+
+[source code]: {{% eturl details %}}
+{{% /note %}}
+
+## Example
+
+With this markup:
+
+```text
+{{</* details summary="See the details" */>}}
+This is a **bold** word.
+{{</* /details */>}}
+```
+
+Hugo renders this HTML:
+
+```html
+<details>
+  <summary>See the details</summary>
+  <p>This is a <strong>bold</strong> word.</p>
+</details>
+```
+
+Which looks like this in your browser:
+
+{{< details summary="See the details" >}}
+This is a **bold** word.
+{{< /details >}}
+
+## Arguments
+
+summary
+: (`string`) The content of the child `summary` element rendered from Markdown to HTML. Default is `Details`.
+
+open
+: (`bool`) Whether to initially display the content of the `details` element. Default is `false`.
+
+class
+: (`string`) The `class` attribute of the `details` element.
+
+name
+: (`string`) The `name` attribute of the `details` element.
+
+title
+: (`string`) The `title` attribute of the `details` element.
+
+## Styling
+
+Use CSS to style the `details` element, the `summary` element, and the content itself.
+
+```css
+/* target the details element */
+details { }
+
+/* target the summary element */
+details > summary { }
+
+/* target the children of the summary element */
+details > summary > * { }
+
+/* target the content */
+details > :not(summary) { }
+```
diff --git a/content/en/shortcodes/figure.md b/content/en/shortcodes/figure.md
new file mode 100755
index 000000000..a71f808a4
--- /dev/null
+++ b/content/en/shortcodes/figure.md
@@ -0,0 +1,121 @@
+---
+title: Figure
+description: Insert an HTML figure element into your content using the figure shortcode.
+categories: [shortcodes]
+keywords: []
+menu:
+  docs:
+    parent: shortcodes
+    weight:
+weight:
+toc: true
+---
+
+{{% note %}}
+To override Hugo's embedded `figure` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
+
+[source code]: {{% eturl figure %}}
+{{% /note %}}
+
+## Example
+
+With this markup:
+
+```text
+{{</* figure
+  src="/images/examples/zion-national-park.jpg"
+  alt="A photograph of Zion National Park"
+  link="https://www.nps.gov/zion/index.htm"
+  caption="Zion National Park"
+  class="ma0 w-75"
+*/>}}
+```
+
+Hugo renders this HTML:
+
+```html
+<figure class="ma0 w-75">
+  <a href="https://www.nps.gov/zion/index.htm">
+    <img 
+      src="/images/examples/zion-national-park.jpg" 
+      alt="A photograph of Zion National Park"
+    >
+  </a>
+  <figcaption>
+    <p>Zion National Park</p>
+  </figcaption>
+</figure>
+```
+
+Which looks like this in your browser:
+
+{{< figure
+  src="/images/examples/zion-national-park.jpg"
+  alt="A photograph of Zion National Park"
+  link="https://www.nps.gov/zion/index.htm"
+  caption="Zion National Park"
+  class="ma0 w-75"
+>}}
+
+## Arguments
+
+src
+: (`string`) The `src` attribute of the `img` element. Typically this is a [page resource] or a [global resource].
+
+[page resource]: /getting-started/glossary/#page-resource
+[global resource]: /getting-started/glossary/#global-resource
+
+alt
+: (`string`) The `alt` attribute of the `img` element.
+
+width
+: (`int`) The `width` attribute of the `img` element.
+
+height
+: (`int`) The `height` attribute of the `img` element.
+
+loading
+: (`string`) The `loading` attribute of the `img` element.
+
+class
+: (`string`) The `class` attribute of the `figure` element.
+
+link
+: (`string`) The `href` attribute of the anchor element that wraps the `img` element.
+
+target
+: (`string`) The `target` attribute of the anchor element that wraps the `img` element.
+
+rel
+: (`rel`) The `rel` attribute of the anchor element that wraps the `img` element.
+
+title
+: (`string`) Within the `figurecaption` element, the title is at the top, wrapped within an `h4` element.
+
+caption
+: (`string`) Within the `figurecaption` element, the caption is at the bottom and may contain plain text or markdown.
+
+attr
+: (`string`) Within the `figurecaption` element, the attribution appears next to the caption and may contain plain text or markdown.
+
+attrlink
+: (`string`) The `href` attribute of the anchor element that wraps the attribution.
+
+## Image location
+
+The `figure` shortcode resolves internal Markdown destinations by looking for a matching [page resource], falling back to a matching [global resource]. Remote destinations are passed through, and the render hook will not throw an error or warning if unable to resolve a destination.
+
+[page resource]: /getting-started/glossary/#page-resource
+[global resource]: /getting-started/glossary/#global-resource
+
+You must place global resources in the assets directory. If you have placed your resources in the static directory, and you are unable or unwilling to move them, you must mount the static directory to the assets directory by including both of these entries in your site configuration:
+
+{{< code-toggle file=hugo >}}
+[[module.mounts]]
+source = 'assets'
+target = 'assets'
+
+[[module.mounts]]
+source = 'static'
+target = 'assets'
+{{< /code-toggle >}}
diff --git a/content/en/shortcodes/gist.md b/content/en/shortcodes/gist.md
new file mode 100755
index 000000000..dc85f282c
--- /dev/null
+++ b/content/en/shortcodes/gist.md
@@ -0,0 +1,41 @@
+---
+title: Gist
+description: Embed a GitHub Gist in your content using the gist shortcode.
+categories: [shortcodes]
+keywords: []
+menu:
+  docs:
+    parent: shortcodes
+    weight:
+weight:
+---
+
+{{% note %}}
+To override Hugo's embedded `gist` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
+
+[source code]: {{% eturl gist %}}
+{{% /note %}}
+
+To display a GitHub gist with this URL:
+
+```text
+https://gist.github.com/user/50a7482715eac222e230d1e64dd9a89b
+```
+
+Include this in your Markdown:
+
+```text
+{{</* gist user 23932424365401ffa5e9d9810102a477 */>}}
+```
+
+This will display all files in the gist alphabetically by file name.
+
+{{< gist jmooring 23932424365401ffa5e9d9810102a477 >}}
+
+To display a specific file within the gist:
+
+```text
+{{</* gist user 23932424365401ffa5e9d9810102a477 list.html */>}}
+```
+
+{{< gist jmooring 23932424365401ffa5e9d9810102a477 list.html >}}
diff --git a/content/en/shortcodes/highlight.md b/content/en/shortcodes/highlight.md
new file mode 100755
index 000000000..65f54e53f
--- /dev/null
+++ b/content/en/shortcodes/highlight.md
@@ -0,0 +1,118 @@
+---
+title: Highlight
+description: Insert syntax-highlighted code into your content using the highlight shortcode.
+categories: [shortcodes]
+keywords: []
+menu:
+  docs:
+    parent: shortcodes
+    weight:
+weight:
+toc: true
+---
+
+{{% note %}}
+To override Hugo's embedded `highlight` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
+
+[source code]: {{% eturl highlight %}}
+{{% /note %}}
+
+{{% note %}}
+With the Markdown [content format], the `highlight` shortcode is rarely needed because, by default, Hugo automatically applies syntax highlighting to fenced code blocks.
+
+The primary use case for the `highlight` shortcode in Markdown is to apply syntax highlighting to inline code snippets.
+
+[content format]: /content-management/formats/
+{{% /note %}}
+
+The `highlight` shortcode calls the [`transform.Highlight`] function which uses the [Chroma] syntax highlighter, supporting over 200 languages with more than 40 [available styles].
+
+[chroma]: https://github.com/alecthomas/chroma
+[available styles]: https://xyproto.github.io/splash/docs/
+[`transform.Highlight`]: /functions/transform/highlight/
+
+## Arguments
+
+The `highlight` shortcode takes three arguments.
+
+```text
+{{</* highlight LANG OPTIONS */>}}
+CODE
+{{</* /highlight */>}}
+```
+
+CODE
+: (`string`) The code to highlight.
+
+LANG
+: (`string`) The language of the code to highlight. Choose from one of the [supported languages]. This value is case-insensitive.
+
+OPTIONS
+: (`string`) Zero or more space-separated key-value pairs wrapped in quotation marks. Set default values for each option in your [site configuration]. The key names are case-insensitive.
+
+[site configuration]: /getting-started/configuration-markup#highlight
+[supported languages]: https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages
+
+## Example
+
+```text
+{{</* highlight go "linenos=inline, hl_Lines=3 6-8, style=emacs" */>}}
+package main
+
+import "fmt"
+
+func main() {
+    for i := 0; i < 3; i++ {
+        fmt.Println("Value of i:", i)
+    }
+}
+{{</* /highlight */>}}
+```
+
+Hugo renders this to:
+
+{{< highlight go "linenos=inline, hl_Lines=3 6-8, noClasses=true" >}}
+package main
+
+import "fmt"
+
+func main() {
+    for i := 0; i < 3; i++ {
+            fmt.Println("Value of i:", i)
+    }
+}
+{{< /highlight >}}
+
+You can also use the `highlight` shortcode for inline code snippets:
+
+```text
+This is some {{</* highlight go "hl_inline=true" */>}}fmt.Println("inline"){{</* /highlight */>}} code.
+```
+
+Hugo renders this to:
+
+This is some {{< highlight go "hl_inline=true, noClasses=true" >}}fmt.Println("inline"){{< /highlight >}} code.
+
+Given the verbosity of the example above, if you need to frequently highlight inline code snippets, create your own shortcode using a shorter name with preset options.
+
+{{< code file=layouts/shortcodes/hl.html >}}
+{{ $code := .Inner | strings.TrimSpace }}
+{{ $lang := or (.Get 0) "go"  }}
+{{ $opts := dict "hl_inline" true "noClasses" true }}
+{{ transform.Highlight $code $lang $opts }}
+{{< /code >}}
+
+
+```text
+This is some {{</* hl */>}}fmt.Println("inline"){{</* /hl */>}} code.
+```
+
+Hugo renders this to:
+
+This is some {{< hl >}}fmt.Println("inline"){{< /hl >}} code.
+
+## Options
+
+Pass the options when calling the shortcode. You can set their default values in your [site configuration].
+
+{{% include "functions/_common/highlighting-options" %}}
diff --git a/content/en/shortcodes/instagram.md b/content/en/shortcodes/instagram.md
new file mode 100755
index 000000000..de53fe898
--- /dev/null
+++ b/content/en/shortcodes/instagram.md
@@ -0,0 +1,56 @@
+---
+title: Instagram
+description: Embed an Instagram post in your content using the instagram shortcode.
+categories: [shortcodes]
+keywords: []
+menu:
+  docs:
+    parent: shortcodes
+    weight:
+weight:
+toc: true
+---
+
+{{% note %}}
+To override Hugo's embedded `instagram` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
+
+[source code]: {{% eturl instagram %}}
+{{% /note %}}
+
+## Example
+
+To display an Instagram post with this URL:
+
+```text
+https://www.instagram.com/p/CxOWiQNP2MO/
+```
+
+Include this in your Markdown:
+
+```text
+{{</* instagram CxOWiQNP2MO */>}}
+```
+
+Huge renders this to:
+
+{{< instagram CxOWiQNP2MO >}}
+
+## Privacy
+
+Adjust the relevant privacy settings in your site configuration.
+
+{{< code-toggle config=privacy.instagram />}}
+
+disable
+: (`bool`) Whether to disable the shortcode. Default is `false`.
+
+simple
+: (`bool`) Whether to enable simple mode for image card generation. If `true`, Hugo creates a static card without JavaScript. This mode only supports image cards, and the image is fetched directly from Instagram's servers. Default is `false`.
+
+The source code for the simple version of the shortcode is available [here].
+
+If you enable simple mode you may want to disable the hardcoded inline styles by setting `disableInlineCSS` to `true` in your site configuration. The default value for this setting is `false`.
+
+[here]: {{% eturl instagram_simple %}}
+
+{{< code-toggle config=services.instagram />}}
diff --git a/content/en/shortcodes/param.md b/content/en/shortcodes/param.md
new file mode 100755
index 000000000..077c3bc3a
--- /dev/null
+++ b/content/en/shortcodes/param.md
@@ -0,0 +1,48 @@
+---
+title: Param
+description: Insert a parameter from front matter or site configuration into your content using the param shortcode.
+categories: [shortcodes]
+keywords: []
+menu:
+  docs:
+    parent: shortcodes
+    weight:
+weight:
+---
+
+{{% note %}}
+To override Hugo's embedded `param` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
+
+[source code]: {{% eturl param %}}
+{{% /note %}}
+
+The `param` shortcode renders a parameter from front matter, falling back to a site parameter of the same name. The shortcode throws an error if the parameter does not exist.
+
+{{< code file=example.md lang=text >}}
+---
+title: Example
+date: 2025-01-15T23:29:46-08:00
+params:
+  color: red
+  size: medium
+---
+
+We found a {{</* param "color" */>}} shirt.
+{{< /code >}}
+
+Hugo renders this to:
+
+```html
+<p>We found a red shirt.</p>
+```
+
+
+
+Access nested values by [chaining] the [identifiers]:
+
+[chaining]: /getting-started/glossary/#chain
+[identifiers]: /getting-started/glossary/#identifier
+
+```text
+{{</* param my.nested.param */>}}
+```
diff --git a/content/en/shortcodes/qr.md b/content/en/shortcodes/qr.md
new file mode 100755
index 000000000..8de9f5faa
--- /dev/null
+++ b/content/en/shortcodes/qr.md
@@ -0,0 +1,113 @@
+---
+title: QR
+description: Insert a QR code into your content using the qr shortcode.
+categories: [shortcodes]
+keywords: []
+menu:
+  docs:
+    parent: shortcodes
+    weight:
+weight:
+toc: true
+---
+
+{{< new-in 0.141.0 >}}
+
+{{% note %}}
+To override Hugo's embedded `qr` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
+
+[source code]: {{% eturl qr %}}
+{{% /note %}}
+
+The `qr` shortcode encodes the given text into a [QR code] using the specified options and renders the resulting image.
+
+Internally this shortcode calls the `images.QR` function. Please read the [related documentation] for implementation details and guidance.
+
+[QR code]: https://en.wikipedia.org/wiki/QR_code
+[related documentation]: /functions/images/qr/
+
+## Examples
+
+Use the self-closing syntax to pass the text as an argument:
+
+```text
+{{</* qr text="https://gohugo.io" /*/>}}
+```
+
+Or insert the text between the opening and closing tags:
+
+```text
+{{</* qr */>}}
+https://gohugo.io
+{{</* /qr */>}}
+```
+
+Both of the above produce this image:
+
+{{< qr text="https://gohugo.io" class="qrcode" />}}
+
+To create a QR code for a phone number:
+
+```text
+{{</* qr text="tel:+12065550101" /*/>}}
+```
+
+{{< qr text="tel:+12065550101" class="qrcode" />}}
+
+To create a QR code containing contact information in the [vCard] format:
+
+[vCard]: https://en.wikipedia.org/wiki/VCard
+
+```text
+{{</* qr level="low" scale=2 alt="QR code of vCard for John Smith" */>}}
+BEGIN:VCARD
+VERSION:2.1
+N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD
+FN;CHARSET=UTF-8:Dr. John R. Smith, PhD.
+ORG;CHARSET=UTF-8:ABC Widgets
+TITLE;CHARSET=UTF-8:Vice President Engineering
+TEL;TYPE=WORK:+12065550101
+EMAIL;TYPE=WORK:jsmith@example.org
+END:VCARD
+{{</* /qr */>}}
+```
+
+{{< qr level="low" scale=2 alt="QR code of vCard for John Smith" class="qrcode" >}}
+BEGIN:VCARD
+VERSION:2.1
+N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD
+FN;CHARSET=UTF-8:Dr. John R. Smith, PhD.
+ORG;CHARSET=UTF-8:ABC Widgets
+TITLE;CHARSET=UTF-8:Vice President Engineering
+TEL;TYPE=WORK:+12065550101
+EMAIL;TYPE=WORK:jsmith@example.org
+END:VCARD
+{{< /qr >}}
+
+## Arguments
+
+text
+: (`string`) The text to encode, falling back to the text between the opening and closing shortcode tags.
+
+level
+: (`string`) The error correction level to use when encoding the text, one of `low`, `medium`, `quartile`, or `high`. Default is `medium`.
+
+scale
+: (`int`) The number of image pixels per QR code module. Must be greater than or equal to 2. Default is `4`.
+
+targetDir
+: (`string`) The subdirectory within the [`publishDir`] where Hugo will place the generated image.
+
+[`publishDir`]: /getting-started/configuration/#publishdir
+
+alt
+: (`string`) The `alt` attribute of the `img` element.
+
+class
+: (`string`) The `class` attribute of the `img` element.
+
+id
+: (`string`) The `id` attribute of the `img` element.
+
+title
+: (`string`) The `title` attribute of the `img` element.
diff --git a/content/en/shortcodes/ref.md b/content/en/shortcodes/ref.md
new file mode 100755
index 000000000..af133447e
--- /dev/null
+++ b/content/en/shortcodes/ref.md
@@ -0,0 +1,48 @@
+---
+title: Ref
+description: Insert a permalink to the given page reference using the ref shortcode.
+categories: [shortcodes]
+keywords: []
+menu:
+  docs:
+    parent: shortcodes
+    weight:
+weight:
+---
+
+{{% note %}}
+To override Hugo's embedded `ref` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
+
+[source code]: {{% eturl ref %}}
+{{% /note %}}
+
+{{% note %}}
+When working with the Markdown [content format], this shortcode has become largely redundant. Its functionality is now primarily handled by [link render hooks], specifically the embedded one provided by Hugo. This hook effectively addresses all the use cases previously covered by this shortcode.
+
+[content format]: /content-management/formats/
+[link render hooks]: /render-hooks/images/#default
+{{% /note %}}
+
+The `ref` shortcode returns the permalink of the given page reference.
+
+Example usage:
+
+```text
+[Post 1]({{%/* ref "/posts/post-1" */%}})
+[Post 1]({{%/* ref "/posts/post-1.md" */%}})
+[Post 1]({{%/* ref "/posts/post-1#foo" */%}})
+[Post 1]({{%/* ref "/posts/post-1.md#foo" */%}})
+```
+
+Rendered:
+
+```html
+<a href="https://example.org/posts/post-1/">Post 1</a>
+<a href="https://example.org/posts/post-1/">Post 1</a>
+<a href="https://example.org/posts/post-1/#foo">Post 1</a>
+<a href="https://example.org/posts/post-1/#foo">Post 1</a>
+```
+
+{{% note %}}
+Always use the `{{%/* */%}}` notation when calling this shortcode.
+{{% /note %}}
diff --git a/content/en/shortcodes/relref.md b/content/en/shortcodes/relref.md
new file mode 100755
index 000000000..11dad8ef3
--- /dev/null
+++ b/content/en/shortcodes/relref.md
@@ -0,0 +1,48 @@
+---
+title: Relref
+description: Insert a relative permalink to the given page reference using the relref shortcode.
+categories: [shortcodes]
+keywords: []
+menu:
+  docs:
+    parent: shortcodes
+    weight:
+weight:
+---
+
+{{% note %}}
+To override Hugo's embedded `relref` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
+
+[source code]: {{% eturl relref %}}
+{{% /note %}}
+
+{{% note %}}
+When working with the Markdown [content format], this shortcode has become largely redundant. Its functionality is now primarily handled by [link render hooks], specifically the embedded one provided by Hugo. This hook effectively addresses all the use cases previously covered by this shortcode.
+
+[content format]: /content-management/formats/
+[link render hooks]: /render-hooks/images/#default
+{{% /note %}}
+
+The `relref` shortcode returns the relative permalink of the given page reference.
+
+Example usage:
+
+```text
+[Post 1]({{%/* relref "/posts/post-1" */%}})
+[Post 1]({{%/* relref "/posts/post-1.md" */%}})
+[Post 1]({{%/* relref "/posts/post-1#foo" */%}})
+[Post 1]({{%/* relref "/posts/post-1.md#foo" */%}})
+```
+
+Rendered:
+
+```html
+<a href="/posts/post-1/">Post 1</a>
+<a href="/posts/post-1/">Post 1</a>
+<a href="/posts/post-1/#foo">Post 1</a>
+<a href="/posts/post-1/#foo">Post 1</a>
+```
+
+{{% note %}}
+Always use the `{{%/* */%}}` notation when calling this shortcode.
+{{% /note %}}
diff --git a/content/en/shortcodes/vimeo.md b/content/en/shortcodes/vimeo.md
new file mode 100755
index 000000000..a496669de
--- /dev/null
+++ b/content/en/shortcodes/vimeo.md
@@ -0,0 +1,72 @@
+---
+title: Vimeo
+description: Embed a Vimeo video in your content using the vimeo shortcode.
+categories: [shortcodes]
+keywords: []
+menu:
+  docs:
+    parent: shortcodes
+    weight:
+weight:
+toc: true
+---
+
+{{% note %}}
+To override Hugo's embedded `vimeo` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
+
+[source code]: {{% eturl vimeo %}}
+{{% /note %}}
+
+## Example
+
+To display a Vimeo video with this URL:
+
+```text
+https://vimeo.com/channels/staffpicks/55073825
+```
+
+Include this in your Markdown:
+
+```text
+{{</* vimeo 55073825 */>}}
+```
+
+Hugo renders this to:
+
+{{< vimeo 55073825 >}}
+
+## Arguments
+
+class
+: (`string`) The `class` attribute of the wrapping `div` element. Adding one or more CSS classes disables inline styling.
+
+id
+: (`string`) The `id` of the Vimeo video
+
+title
+: (`string`) The `title` attribute of the `iframe` element.
+
+If you proivde a `class` or `title` you must use a named parameter for the `id`.
+
+```text
+{{</* vimeo id=55073825 class="foo bar" title="My Video" */>}}
+```
+
+## Privacy
+
+Adjust the relevant privacy settings in your site configuration.
+
+{{< code-toggle config=privacy.vimeo />}}
+
+disable
+: (`bool`) Whether to disable the shortcode. Default is `false`.
+
+enableDNT
+: (`bool`) Whether to block the Vimeo player from tracking session data and analytics. Default is `false`.
+
+simple
+: (`bool`) Whether to enable simple mode. If `true`, the video thumbnail is fetched from Vimeo and overlaid with a play button. Clicking the thumbnail opens the video in a new Vimeo tab. Default is `false`.
+
+The source code for the simple version of the shortcode is available [here].
+
+[here]: {{% eturl vimeo_simple %}}
diff --git a/content/en/shortcodes/x.md b/content/en/shortcodes/x.md
new file mode 100755
index 000000000..b2e531f54
--- /dev/null
+++ b/content/en/shortcodes/x.md
@@ -0,0 +1,62 @@
+---
+title: X
+description: Embed an X post in your content using the x shortcode.
+categories: [shortcodes]
+keywords: []
+menu:
+  docs:
+    parent: shortcodes
+    weight:
+weight:
+toc: true
+---
+
+{{< new-in 0.141.0 >}}
+
+{{% note %}}
+To override Hugo's embedded `x` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
+
+[source code]: {{% eturl x %}}
+{{% /note %}}
+
+## Example
+
+To display an X post with this URL:
+
+```txt
+https://x.com/SanDiegoZoo/status/1453110110599868418
+```
+
+Include this in your Markdown:
+
+```text
+{{</* x user="SanDiegoZoo" id="1453110110599868418" */>}}
+```
+
+Rendered:
+
+{{< x user="SanDiegoZoo" id="1453110110599868418" >}}
+
+
+## Privacy
+
+Adjust the relevant privacy settings in your site configuration.
+
+{{< code-toggle config=privacy.x />}}
+
+disable
+: (`bool`) Whether to disable the shortcode. Default is `false`.
+
+enableDNT
+: (`bool`) Whether to prevent X from using post and embedded page data for personalized suggestions and ads. Default is `false`.
+
+simple
+: (`bool`) Whether to enable simple mode. If `true`, Hugo builds a static version of the of the post without JavaScript. Default is `false`.
+
+The source code for the simple version of the shortcode is available [here].
+
+[here]: {{% eturl x_simple %}}
+
+If you enable simple mode you may want to disable the hardcoded inline styles by setting `disableInlineCSS` to `true` in your site configuration. The default value for this setting is `false`.
+
+{{< code-toggle config=services.x />}}
diff --git a/content/en/shortcodes/youtube.md b/content/en/shortcodes/youtube.md
new file mode 100755
index 000000000..62928ce9b
--- /dev/null
+++ b/content/en/shortcodes/youtube.md
@@ -0,0 +1,97 @@
+---
+title: YouTube
+description: Embed a YouTube video in your content using the youtube shortcode.
+categories: [shortcodes]
+keywords: []
+menu:
+  docs:
+    parent: shortcodes
+    weight:
+weight:
+toc: true
+---
+
+{{% note %}}
+To override Hugo's embedded `youtube` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
+
+[source code]: {{% eturl youtube %}}
+{{% /note %}}
+
+## Example
+
+To display a YouTube video with this URL:
+
+```text
+https://www.youtube.com/watch?v=0RKpf3rK57I
+```
+
+Include this in your Markdown:
+
+```text
+{{</* youtube 0RKpf3rK57I */>}}
+```
+
+Hugo renders this to:
+
+{{< youtube 0RKpf3rK57I >}}
+
+## Arguments
+
+id
+: (`string`) The video `id`. Optional if the `id` is provided as a positional argument as shown in the example above.
+
+allowFullScreen
+{{< new-in 0.125.0 >}}
+: (`bool`) Whether the `iframe` element can activate full screen mode. Default is `true`.
+
+autoplay
+ {{< new-in 0.125.0 >}}
+: (`bool`) Whether to automatically play the video. Forces `mute` to `true`. Default is `false`.
+
+class
+: (`string`) The `class` attribute of the wrapping `div` element. When specified, removes the `style` attributes from the `iframe` element and its wrapping `div` element.
+
+controls
+{{< new-in 0.125.0 >}}
+: (`bool`) Whether to display the video controls. Default is `true`.
+
+end
+{{< new-in 0.125.0 >}}
+: (`int`) The time, measured in seconds from the start of the video, when the player should stop playing the video.
+
+loading
+{{< new-in 0.125.0 >}}
+: (`string`) The loading attribute of the `iframe` element, either `eager` or `lazy`. Default is `eager`.
+
+loop
+{{< new-in 0.125.0 >}}
+: (`bool`) Whether to indefinitely repeat the video. Ignores the `start` and `end` arguments after the first play.  Default is `false`.
+
+mute
+{{< new-in 0.125.0 >}}
+: (`bool`) Whether to mute the video. Always `true` when `autoplay` is `true`. Default is `false`.
+
+start
+{{< new-in 0.125.0 >}}
+: (`int`) The time, measured in seconds from the start of the video, when the player should start playing the video.
+
+title
+: (`string`) The `title` attribute of the `iframe` element. Defaults to "YouTube video".
+
+Example using some of the above:
+
+```text
+{{</* youtube id=0RKpf3rK57I start=30 end=60 loading=lazy */>}}
+```
+
+## Privacy
+
+Adjust the relevant privacy settings in your site configuration.
+
+{{< code-toggle config=privacy.youTube />}}
+
+disable
+: (`bool`) Whether to disable the shortcode. Default is `false`.
+
+privacyEnhanced
+: (`bool`) Whether to block YouTube from storing information about visitors on your website unless the user plays the embedded video. Default is `false`.
diff --git a/content/en/templates/shortcode.md b/content/en/templates/shortcode.md
index 5587c7479..0ed7622ee 100644
--- a/content/en/templates/shortcode.md
+++ b/content/en/templates/shortcode.md
@@ -415,8 +415,8 @@ The same inline shortcode can be reused later in the same content file, with dif
 [`Name`]: /methods/shortcode/name/
 [`Position`]: /methods/shortcode/position/
 [built-in shortcode]: /content-management/shortcodes/
-[figure]: /content-management/shortcodes/#figure
+[figure]: /shortcodes/figure/
 [lookup order]: /templates/lookup-order/
 [source organization]: /getting-started/directory-structure/
 [vimeoexample]: #single-flexible-example-vimeo
-[youtubeshortcode]: /content-management/shortcodes/#youtube
+[youtubeshortcode]: /shortcodes/youtube/
diff --git a/data/docs.yaml b/data/docs.yaml
index 27b1b0a6f..dc61df0e8 100644
--- a/data/docs.yaml
+++ b/data/docs.yaml
@@ -1669,6 +1669,10 @@ config:
       disable: false
       enableDNT: false
       simple: false
+    x:
+      disable: false
+      enableDNT: false
+      simple: false
     youTube:
       disable: false
       privacyEnhanced: false
@@ -1748,6 +1752,8 @@ config:
       limit: -1
     twitter:
       disableInlineCSS: false
+    x:
+      disableInlineCSS: false
   sitemap:
     changeFreq: ""
     disable: false
diff --git a/data/embedded_template_urls.toml b/data/embedded_template_urls.toml
index 68be43d88..cc09aad30 100644
--- a/data/embedded_template_urls.toml
+++ b/data/embedded_template_urls.toml
@@ -30,11 +30,15 @@
 'gist' = 'shortcodes/gist.html'
 'highlight' = 'shortcodes/highlight.html'
 'instagram' = 'shortcodes/instagram.html'
+'instagram_simple' = 'shortcodes/instagram_simple.html'
 'param' = 'shortcodes/param.html'
 'qr' = 'shortcodes/qr.html'
 'ref' = 'shortcodes/ref.html'
 'relref' = 'shortcodes/relref.html'
 'twitter' = 'shortcodes/twitter.html'
+'twitter_simple' = 'shortcodes/twitter_simple.html'
 'vimeo' = 'shortcodes/vimeo.html'
+'vimeo_simple' = 'shortcodes/vimeo_simple.html'
 'x' = 'shortcodes/x.html'
+'x_simple' = 'shortcodes/x_simple.html'
 'youtube' = 'shortcodes/youtube.html'
diff --git a/layouts/shortcodes/hl.html b/layouts/shortcodes/hl.html
new file mode 100644
index 000000000..55dd5c5fc
--- /dev/null
+++ b/layouts/shortcodes/hl.html
@@ -0,0 +1,4 @@
+{{ $code := .Inner | strings.TrimSpace }}
+{{ $lang := or (.Get 0) "go"  }}
+{{ $opts := dict "hl_inline" true "noClasses" true }}
+{{ transform.Highlight $code $lang $opts }}