blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 23:38:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: code block mac mode and gist shortcode styles

Browse Source
This commit is contained in:
Cell
2025-12-18 11:44:57 +08:00
parent 93478b47e1
commit e600d047da
7 changed files with 64 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_partials/_single/_code.scss
+43 -27
View File
@@ -43,16 +43,24 @@ pre:not([data-processed]) {
font-size: $code-block-font-size;
font-family: $code-font-family;
.table-wrapper {
.code-wrapper {
position: relative;
#{$rootPrefix}scrollbar-thumb-color: initial;
> table {
width: 100%;
max-width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
> table,
> table thead,
> table tr,
> table td {
margin: 0;
padding: 0;
border: none !important;
white-space: nowrap;
border: none;
}
}
}
@@ -68,7 +76,7 @@ pre:not([data-processed]) {
#{$rootPrefix}max-shown-lines: attr(data-max number, 10);
#{$rootPrefix}linenostart: attr(data-linenostart number, 1);
.table-wrapper {
.code-wrapper {
overflow: hidden;
height: auto;
@include transition(height 0.5s ease-out);
@@ -83,7 +91,6 @@ pre:not([data-processed]) {
}
.lntable {
border-spacing: 0;
width: auto;
overflow: auto;
display: block;
@@ -135,7 +142,7 @@ pre:not([data-processed]) {
@include border-radius($global-border-radius $global-border-radius 0 0);
@include transition(border-radius 0s);
+ .table-wrapper {
+ .code-wrapper {
@include border-radius(0 0 $global-border-radius $global-border-radius);
> pre.chroma {
@@ -235,10 +242,10 @@ pre:not([data-processed]) {
}
&:has(.code-expand-btn):not(.is-expanded, .is-collapsed) {
.table-wrapper {
.code-wrapper {
height: calc(1.45em * var(#{$rootPrefix}max-shown-lines) + var(#{$rootPrefix}code-expand-offset, 0.5rem));
}
&[data-mode='mac'] .table-wrapper {
&[data-mode='mac'] .code-wrapper {
#{$rootPrefix}code-expand-offset: 1.875rem + 0.5rem;
}
}
@@ -264,7 +271,7 @@ pre:not([data-processed]) {
#{$rootPrefix}code-header-bg: #{darken($code-background-color-dark, 6%)};
}
+ .table-wrapper {
+ .code-wrapper {
height: 0;
}
}
@@ -333,7 +340,7 @@ pre:not([data-processed]) {
}
}
.lntd:last-child pre.chroma,
.table-wrapper > pre.chroma {
.code-wrapper > pre.chroma {
code {
text-wrap: wrap;
}
@@ -342,7 +349,7 @@ pre:not([data-processed]) {
// line number for code block with line wrapping or lineNos=false
&.line-wrapping:not(.line-nos-hidden) .lntd:last-child pre.chroma,
&:not(.line-nos-hidden) .table-wrapper > pre.chroma:not(:has(.ln)) {
&:not(.line-nos-hidden) .code-wrapper > pre.chroma:not(:has(.ln)) {
padding-left: 0;
> code > .line {
display: flex;
@@ -362,7 +369,7 @@ pre:not([data-processed]) {
}
// add sticky effect for line number column when lineNos=false
&:not(.line-nos-hidden) .table-wrapper > pre.chroma > code > .line::before {
&:not(.line-nos-hidden) .code-wrapper > pre.chroma > code > .line::before {
position: sticky;
left: 0;
}
@@ -414,7 +421,14 @@ pre:not([data-processed]) {
}
}
&:not([data-mode='classic']) {
&[data-mode='simple'] {
pre.chroma {
padding-block: 0.875rem;
}
}
// add border for non-classic mode
&.code-block:not([data-mode='classic']) {
border: 1px solid darken($code-background-color, 3%);
[data-theme='dark'] & {
@@ -427,6 +441,9 @@ pre:not([data-processed]) {
// gist shortcode
.gist {
background-color: var(#{$rootPrefix}code-block-background-color);
@include border-radius($global-border-radius $global-border-radius 0 0);
.gist-file,
.gist-data,
.gist-meta {
@@ -434,7 +451,11 @@ pre:not([data-processed]) {
}
.gist-data {
background-color: transparent;
background-color: inherit;
.blob-wrapper {
padding-block: 0.5rem;
}
}
.gist-meta {
@@ -444,20 +465,15 @@ pre:not([data-processed]) {
background-color: var(#{$rootPrefix}gist-meta-background-color);
}
.table-wrapper {
padding-block: 0.5rem;
background-color: var(#{$rootPrefix}code-block-background-color);
@include border-radius($global-border-radius $global-border-radius 0 0);
table.highlight {
margin: 0;
background-color: inherit;
.highlight {
background-color: transparent;
td.blob-num {
position: sticky;
left: 0;
background-color: var(#{$rootPrefix}code-block-background-color);
@include z-index(0, 1);
}
td.blob-num {
position: sticky;
left: 0;
background-color: var(#{$rootPrefix}code-block-background-color);
@include z-index(0, 1);
}
}
assets/js/theme.js
+5
View File
@@ -552,8 +552,13 @@ class FixIt {
initTable(target = document) {
this.util.forEach(target.querySelectorAll('.content table'), ($table) => {
if ($table.parentElement.classList.contains('table-wrapper') || $table.closest('.gist')) return;
const $wrapper = document.createElement('div');
$wrapper.className = 'table-wrapper';
// highlight shortcode
if ($table.closest('.highlight')) {
$wrapper.className = 'code-wrapper';
}
$table.parentElement.replaceChild($wrapper, $table);
$wrapper.appendChild($table);
});
layouts/_markup/render-codeblock.html
+12 -3
View File
@@ -9,6 +9,18 @@
{{- $targetClass := add "code-block " $class -}}
{{- with $config.wrapperclass -}}{{ $targetClass = add $targetClass " " . }}{{- end -}}
{{- /* add code wrapper */ -}}
{{- $REin := cond (strings.Contains $wrapper `<table class="lntable">`)
`(<table class="lntable">[\s\S]*?<\/table>)`
`(<pre tabindex="0" class="chroma">[\s\S]*?<\/pre>)` -}}
{{- $REout := printf `<div class="code-wrapper">$1</div>` -}}
{{- $wrapper = replaceRE $REin $REout $wrapper -}}
{{- /* hide line numbers if linenos=false */ -}}
{{- if not (strings.Contains $wrapper `class="lnt"`) | and (not (strings.Contains $wrapper `class="ln"`)) -}}
{{- $targetClass = add $targetClass " line-nos-hidden" -}}
{{- end -}}
{{- /* add code expand button */ -}}
{{- $lines := cond .Inner (len (split .Inner "\n")) 0 -}}
{{- $maxShownLines := $config.maxshownlines -}}
@@ -19,9 +31,6 @@
{{- /* render for different modes */ -}}
{{- if eq $mode "classic" -}}
{{- $wrapper = dict "Wrapper" $wrapper "Config" $config "Type" .Type | partial "function/code-header.html" -}}
{{- if eq .Options.linenos false -}}
{{- $targetClass = add $targetClass " line-nos-hidden" -}}
{{- end -}}
{{- else -}}
{{- $wrapper = dict "Wrapper" $wrapper "Config" $config | partial "function/code-copy-btn.html" -}}
{{- end -}}
layouts/_partials/function/code-copy-btn.html
+1 -1
View File
@@ -6,7 +6,7 @@
{{- $copyIcon := dict "Class" "fa-regular fa-clone" | partial "plugin/icon.html" -}}
{{- $successIcon := dict "Class" "fa-solid fa-check text-success" | partial "plugin/icon.html" -}}
{{- $copyBtn := printf `<div class="code-copy-btn" aria-label="%s" role="button" title="%s">%s%s</div>` (T "assets.copyToClipboard") (T "assets.copyToClipboard") $copyIcon $successIcon -}}
{{- $wrapper = replaceRE `(<div class="highlight[^>]*>)` (printf `$1%s` $copyBtn) $wrapper -}}
{{- $wrapper = replaceRE `(<div class="code-wrapper">[\s\S]*?<\/div>)` (printf `$1%s` $copyBtn) $wrapper -}}
{{- end -}}
{{- return $wrapper -}}
layouts/_partials/function/code-expand-btn.html
+1 -1
View File
@@ -2,6 +2,6 @@
{{- $wrapper := .Wrapper -}}
{{- $expandIcon := dict "Class" "fa-solid fa-angles-down" | partial "plugin/icon.html" -}}
{{- $expandBtn := printf `<div class="code-expand-btn" aria-label="%s" role="button">%s</div>` (T "assets.expandCode") $expandIcon -}}
{{- $wrapper = replaceRE `(<div class="highlight[^>]*>)` (printf `$1%s` $expandBtn) $wrapper -}}
{{- $wrapper = replaceRE `(<div class="code-wrapper">[\s\S]*?<\/div>)` (printf `$1%s` $expandBtn) $wrapper -}}
{{- return $wrapper -}}
layouts/_partials/function/code-header.html
+1 -7
View File
@@ -34,12 +34,6 @@
{{- $titleEl = replace $titleEl `<span class="code-title">` (printf `<span class="code-title" data-name="%s">` .) -}}
{{- end -}}
{{- $codeHeader := printf `<div class="code-header language-%s">%s%s%s%s%s%s</div>` $type $titleEl $ellipsisBtn $lineNosBtn $lineWrapBtn $editBtn $copyBtn -}}
{{- if strings.Contains $wrapper `<table class="lntable">` -}}
{{- $wrapper = replaceRE `(<table class="lntable">)` (printf "%s$1" $codeHeader) $wrapper -}}
{{- else -}}
{{- /* linenos=false or lineNumbersInTable=false */ -}}
{{- $wrapper = replaceRE `(<pre[^>]*class="[^"]*chroma[^"]*">[\s\S]*?<\/pre>)` (printf `%s<div class="table-wrapper">$1</div>` $codeHeader) $wrapper -}}
{{- end -}}
{{- $wrapper = replaceRE `(<div class="code-wrapper">)` (printf "%s$1" $codeHeader) $wrapper -}}
{{- return $wrapper -}}
layouts/_partials/init/index.html
+1 -1
View File
@@ -1,4 +1,4 @@
{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251128065536-6d00e42b" -}}
{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251218063009-54235ac6" -}}
{{- .Store.Set "this" dict -}}
{{- partial "init/detection-env.html" . -}}