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

support codeblocks with chirpy style

Browse Source
This commit is contained in:
geekifan
2025-04-28 18:10:45 +08:00
parent b38917b7d1
commit 4d6af29e3e
2 changed files with 68 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -106,10 +106,21 @@ td.rouge-code {
} }
} }
div[class^='language-'] { div[class^='highlight'] {
@extend %rounded; @extend %rounded;
@extend %code-snippet-bg; @extend %code-snippet-bg;
tr {
background-color: var(--highlight-bg-color) !important;
border-bottom: none !important;
}
padding-bottom: 0;
.table-wrapper {
margin-bottom: .75rem;
}
box-shadow: var(--language-border-color) 0 0 0 1px; box-shadow: var(--language-border-color) 0 0 0 1px;
.content > & { .content > & {

56
layouts/partials/refactor-content.html Normal file
View File

@ -0,0 +1,56 @@
{{ $content := .Content }}
<!-- Handle tables -->
{{ if findRE `<table` $content }}
{{ $content = replace $content `<table` `<div class="table-wrapper"><table` }}
{{ $content = replace $content `</table>` `</table></div>` }}
{{ $content = replace $content `<code><div class="table-wrapper">` `<code>` }}
{{ $content = replace $content `</table></div></code>` `</table></code>` }}
{{ end }}
<!-- Change checkbox icons -->
{{ if findRE `<input.*type="checkbox"` $content }}
<!-- first replace the li with task-list-item class -->
{{ $content = replaceRE `<li>(\s*)<input` `<li class="task-list-item">$1<input` $content }}
{{ $content = replaceRE `<li class="([^"]*)"(\s*)<input` `<li class="task-list-item $1"$2<input` $content }}
<!-- then add task-list class to the parent ul of the li with task-list-item class -->
{{ $content = replaceRE `<ul>(\s*)<li class="task-list-item` `<ul class="task-list">$1<li class="task-list-item` $content }}
{{ $content = replaceRE `<ul class="([^"]*)"(\s*)<li class="task-list-item` `<ul class="task-list $1"$2<li class="task-list-item` $content }}
<!-- replace all checked checkbox format -->
{{ $content = replaceRE `<input.*?checked.*?type="checkbox".*?>` `<i class="fas fa-check-circle fa-fw checked"></i>` $content }}
{{ $content = replaceRE `<input.*?type="checkbox".*?checked.*?>` `<i class="fas fa-check-circle fa-fw checked"></i>` $content }}
<!-- replace all unchecked checkbox format -->
{{ $content = replaceRE `<input.*?type="checkbox".*?>` `<i class="far fa-circle fa-fw"></i>` $content }}
{{ end }}
<!-- Create heading anchors -->
{{ $headingLevels := slice "2" "3" "4" "5" }}
{{ $headingContent := $content }}
{{ range $level := $headingLevels }}
{{ $markStart := printf `<h%s id="` $level }}
{{ $markEnd := printf `</h%s>` $level }}
{{ $pattern := printf `%s([^"]+)">(.*?)%s` $markStart $markEnd }}
{{ $replacement := printf `%s$1"><span class="me-2">$2</span><a href="#$1" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>%s` $markStart $markEnd }}
{{ $headingContent = replaceRE $pattern $replacement $headingContent }}
{{ end }}
{{ $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="$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 }}
{{ end }}
{{ $content | safeHTML }}