mmckinnon/hugo-theme-chirpy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use codeblock render hook instead of refactor

Browse Source
This commit is contained in:
geekifan
2025-04-29 10:41:08 +08:00
parent e91c746d6c
commit 8bdf964087
3 changed files with 7 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/scss/base/_syntax.scss
View File

@ -9,7 +9,7 @@ code:not([class]):not([id]) {
margin-bottom: 1.2em; /* Override BS Inline-code style */ margin-bottom: 1.2em; /* Override BS Inline-code style */
} }
.highlight { .code-block {
@extend %rounded; @extend %rounded;
@extend %code-snippet-bg; @extend %code-snippet-bg;
@ -116,7 +116,7 @@ td.rouge-code {
} }
} }
div[class^='highlight'] { .code-block {
@extend %rounded; @extend %rounded;
@extend %code-snippet-bg; @extend %code-snippet-bg;

5
layouts/_default/_markup/render-codeblock.html Normal file
View File

@ -0,0 +1,5 @@
<div class="code-block">
<div class="code-header"> <span data-label-text="{{ if .Attributes.file }}{{ .Attributes.file }}{{ else }}{{ partial "language-alias.html" (dict "language" .Type) }}{{ end }}">{{ if .Attributes.file }}<i class="far fa-file-code fa-fw"></i>{{ else }}<i class="fas fa-code fa-fw small"></i>{{ end }}</span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div>
{{ $result := transform.HighlightCodeBlock . }}
{{ $result.Wrapped }}
</div>

27
layouts/partials/refactor-content.html
View File

@ -33,31 +33,4 @@
{{ $content = $headingContent | safeHTML }} {{ $content = $headingContent | safeHTML }}
<!-- Insert code header after highlight div and extract language from code class or file attribute -->
{{ if findRE `<div class="highlight"` $content }}
<!-- Add a special marker at the beginning of every <div class="highlight"> -->
{{ $content = replaceRE `<div class="highlight"` `<div class="CHIRPY-HIGHLIGHT-MARKER highlight"` $content }}
<!-- Process highlight divs with file attribute -->
{{ $content = replaceRE `<div class="CHIRPY-HIGHLIGHT-MARKER highlight"([^>]*?)file="([^"]*)"([^>]*?)>` `<div class="highlight"$1file="$2"$3><div class="code-header"> <span data-label-text="$2"><i class="far fa-file-code fa-fw"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div>` $content }}
<!-- Process remaining highlight divs that still have the marker (no file attribute) -->
{{ $content = replaceRE `<div class="CHIRPY-HIGHLIGHT-MARKER highlight"([^>]*?)>([\s\S]*?)<code class="language-([^"]*)"` `<div class="highlight"$1><div class="code-header"> <span data-label-text-language="$3"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div>$2<code class="language-$3"` $content }}
<!-- Process language aliases in data-label-text -->
{{ $pattern := `<span data-label-text-language="([^"]*)"` }}
<!-- 查找所有语言标签，逐个处理 -->
{{ range findRE $pattern $content -1 }}
{{ $langRaw := replaceRE $pattern "$1" . }}
{{ $langNormalized := partial "language-alias.html" (dict "language" $langRaw) }}
{{ if ne $langNormalized "" }}
{{ $replacement := printf `<span data-label-text="%s"` $langNormalized }}
{{ $original := printf `<span data-label-text-language="%s"` $langRaw }}
{{ $content = replace $content $original $replacement }}
{{ end }}
{{ end }}
{{ end }}
{{ $content | safeHTML }} {{ $content | safeHTML }}