From 71d8426ee6a72a5a6f04dcefa6ec66c45f5a1609 Mon Sep 17 00:00:00 2001 From: Joe Mooring Date: Wed, 5 Mar 2025 15:05:41 -0800 Subject: [PATCH] theme: Create code block render hook --- content/en/functions/collections/Where.md | 2 +- content/en/functions/go-template/return.md | 8 +-- content/en/functions/transform/XMLEscape.md | 2 +- hugo.toml | 7 +- .../_default/_markup/render-codeblock.html | 65 +++++++++++++++++++ 5 files changed, 75 insertions(+), 9 deletions(-) create mode 100644 layouts/_default/_markup/render-codeblock.html diff --git a/content/en/functions/collections/Where.md b/content/en/functions/collections/Where.md index 0c03d01a6..8ef0880ee 100644 --- a/content/en/functions/collections/Where.md +++ b/content/en/functions/collections/Where.md @@ -213,7 +213,7 @@ With TOML, date values are first-class citizens. TOML has a date data type while In the TOML example below, note that the event date is not quoted. -{{< code file="content/events/2024-user-conference.md" >}} +{{< code file=content/events/2024-user-conference.md >}} +++ title = '2024 User Conference" eventDate = 2024-04-01 diff --git a/content/en/functions/go-template/return.md b/content/en/functions/go-template/return.md index a7f2287d4..35c7f2562 100644 --- a/content/en/functions/go-template/return.md +++ b/content/en/functions/go-template/return.md @@ -27,7 +27,7 @@ Unlike `return` statements in other languages, Hugo executes the first occurrenc By way of example, let's create a partial template that _renders_ HTML, describing whether the given number is odd or even: -{{< code file="layouts/partials/odd-or-even.html" >}} +{{< code file=layouts/partials/odd-or-even.html >}} {{ if math.ModBool . 2 }}

{{ . }} is even

{{ else }} @@ -43,7 +43,7 @@ When called, the partial renders HTML: Instead of rendering HTML, let's create a partial that _returns_ a boolean value, reporting whether the given number is even: -{{< code file="layouts/partials/is-even.html" >}} +{{< code file=layouts/partials/is-even.html >}} {{ return math.ModBool . 2 }} {{< /code >}} @@ -78,7 +78,7 @@ A partial that returns a value must contain only one `return` statement, placed For example: -{{< code file="layouts/partials/is-even.html" >}} +{{< code file=layouts/partials/is-even.html >}} {{ $result := false }} {{ if math.ModBool . 2 }} {{ $result = "even" }} @@ -92,7 +92,7 @@ For example: The construct below is incorrect; it contains more than one `return` statement. {{< /note >}} -{{< code file="layouts/partials/do-not-do-this.html" >}} +{{< code file=layouts/partials/do-not-do-this.html >}} {{ if math.ModBool . 2 }} {{ return "even" }} {{ else }} diff --git a/content/en/functions/transform/XMLEscape.md b/content/en/functions/transform/XMLEscape.md index f50fce917..234dec6bb 100644 --- a/content/en/functions/transform/XMLEscape.md +++ b/content/en/functions/transform/XMLEscape.md @@ -32,7 +32,7 @@ For example: When using `transform.XMLEscape` in a template rendered by Go's [html/template] package, declare the string to be safe HTML to avoid double escaping. For example, in an RSS template: -{{< code file="layouts/_default/rss.xml" >}} +{{< code file=layouts/_default/rss.xml >}} {{ .Summary | transform.XMLEscape | safeHTML }} {{< /code >}} diff --git a/hugo.toml b/hugo.toml index b177e5765..92a638072 100644 --- a/hugo.toml +++ b/hugo.toml @@ -62,9 +62,10 @@ disableAliases = true [markup.goldmark.parser.attribute] block = true [markup.highlight] - noClasses = false - style = 'solarized-dark' - wrapperClass = 'highlight not-prose' + lineNumbersInTable = false + noClasses = false + style = 'solarized-dark' + wrapperClass = 'highlight not-prose' [mediaTypes] [mediaTypes."text/netlify"] diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html new file mode 100644 index 000000000..cb0938a25 --- /dev/null +++ b/layouts/_default/_markup/render-codeblock.html @@ -0,0 +1,65 @@ +{{/* prettier-ignore-start */}} +{{/* +Renders a highlighted code block using the given options and attributes. + +In addition to the options available to the transform.Highlight function, you +may also specify the following parameters: + +@param {bool} [copy=false] Whether to display a copy-to-clipboard button. +@param {string} [file] The file name to display above the rendered code. + +@returns {template.HTML} + +@examples + + ```go + fmt.Println("Hello world!") + ``` + + ```go {linenos=true copy=true file="layouts/index.html"} + fmt.Println("Hello world!") + ``` +*/}} +{{/* prettier-ignore-end */}} + +{{- $copy := false }} +{{- $file := or .Attributes.file "" }} +{{- $ext := strings.TrimPrefix "." (path.Ext $file) }} +{{- $lang := or .Type $ext "text" }} +{{- if eq $lang "html" }} + {{- $lang = "go-html-template" }} +{{- end }} + +{{- with .Attributes.copy }} + {{- if in (slice true "true" 1) . }} + {{- $copy = true }} + {{- else if in (slice false "false" 0) . }} + {{- $copy = false }} + {{- end }} +{{- end }} + + +
+ {{- $fileSelectClass := "select-none" }} + {{- if $copy }} + {{- $fileSelectClass = "select-text" }} + + + + {{- end }} + {{- with $file }} +
+ {{ . }} +
+ {{- end }} + +
+ {{- transform.Highlight (strings.TrimSpace .Inner) $lang .Options }} +
+