fix mermaid

This commit is contained in:
Mivinci 2022-11-09 18:03:38 +08:00
parent 1105d5e939
commit 88481e9f0b
15 changed files with 59 additions and 47 deletions

View file

@ -36,6 +36,10 @@
align-items: flex-start; align-items: flex-start;
} }
.items-end {
align-items: flex-end;
}
.items-baseline { .items-baseline {
align-items: baseline; align-items: baseline;
} }
@ -78,6 +82,11 @@ $texts: (xs, 0.75), (sm, 0.875), (base, 1), (lg, 1.125), (xl, 1.25),
white-space: nowrap; white-space: nowrap;
} }
.list-disc {
list-style-type: disc;
padding-inline-start: 22px;
}
/* interactivity */ /* interactivity */
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;

View file

@ -3,7 +3,7 @@
} }
.chroma { .chroma {
background-color: #292929; background-color: #222222;
margin: .5em 0; margin: .5em 0;
} }

View file

@ -1,6 +1,8 @@
import { setup_theme_switch } from "./theme" import { setup_theme_switch } from "./theme"
import "./style"; import { fix_checkbox_list_style } from "./style"
import "./selectable"; import { setup_selectable } from './selectable'
setup_theme_switch('theme-switch') setup_theme_switch('theme-switch')
setup_selectable()
fix_checkbox_list_style('.md ul')

View file

@ -1,4 +1,6 @@
const selectable = '{{ .Site.Params.selectable }}' export function setup_selectable () {
if (selectable === 'false') { const selectable = '{{ .Site.Params.selectable }}'
document.documentElement.style = 'user-select:none' if (selectable === 'false') {
document.documentElement.style = 'user-select:none'
}
} }

View file

@ -1,11 +1,8 @@
// fix style of checked/unchecked list items /** @param {string} selectors */
document.querySelectorAll('.md ul').forEach(v => { export function fix_checkbox_list_style(selectors) {
if (/<li><input .+>.+<\/li>/.test(v.innerHTML)) { document.querySelectorAll(selectors).forEach(v => {
console.log(v); if (/<li><input .+>.+<\/li>/.test(v.innerHTML)) {
v.classList.add('ul-checkbox'); v.classList.add('ul-checkbox');
} }
}); });
}
// // use custom font family
// document.querySelector('body').style.setProperty('--global-font-family', '{{ .Site.Params.globalFontFamily }}');

View file

@ -53,16 +53,14 @@ function switch_minima_theme(current, next) {
/** @param {string} theme */ /** @param {string} theme */
function switch_utterances_theme(theme) { function switch_utterances_theme(theme) {
if (!utterances) { utterances =utterances || document.querySelector('iframe.utterances-frame')
utterances = document.querySelector('iframe.utterances-frame') if (!utterances) return
}
utterances.contentWindow.postMessage({ type: 'set-theme', theme }, 'https://utteranc.es') utterances.contentWindow.postMessage({ type: 'set-theme', theme }, 'https://utteranc.es')
} }
/** @param {string} theme */ /** @param {string} theme */
function switch_giscus_theme(theme) { function switch_giscus_theme(theme) {
if (!giscus) { giscus = giscus || document.querySelector('iframe.giscus-frame')
giscus = document.querySelector('iframe.giscus-frame') if (!giscus) return
}
giscus.contentWindow.postMessage({giscus: {setConfig: {theme}}}, 'https://giscus.app') giscus.contentWindow.postMessage({giscus: {setConfig: {theme}}}, 'https://giscus.app')
} }

View file

@ -3,8 +3,9 @@ author: "Hugo Authors"
title: "Markdown Syntax Guide" title: "Markdown Syntax Guide"
date: "2021-07-18T10:52:59+08:00" date: "2021-07-18T10:52:59+08:00"
description: "Sample article showcasing basic Markdown syntax." description: "Sample article showcasing basic Markdown syntax."
categories: ["markdown"] categories:
tags: ["markdown"] tags:
- markdown
--- ---
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
@ -100,7 +101,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
type Registry interface { type Registry interface {
Register(*Service, ...RegisterOption) error Register(*Service, ...RegisterOption) error
Deregister(*Service, ...DeregisterOption) error Deregister(*Service, ...DeregisterOption) error
GetService(string, ...GetOption) ([]*Service, error) List(string, ...ListOption) ([]*Service, error)
} }
``` ```

View file

@ -3,8 +3,9 @@ author: "Mivinci"
title: "Markdown 语法指北" title: "Markdown 语法指北"
date: "2021-07-18T10:52:59+08:00" date: "2021-07-18T10:52:59+08:00"
description: "一篇 Markdown 示例文章,翻译自官方示例。" description: "一篇 Markdown 示例文章,翻译自官方示例。"
categories: ["markdown"] categories:
tags: ["markdown"] tags:
- markdown
--- ---
本文提供了一个可以在 Hugo 内容文件中使用的基本 Markdown 语法示例,还展示了基本 HTML 元素是否在 Hugo 主题中使用 CSS 进行修饰。 本文提供了一个可以在 Hugo 内容文件中使用的基本 Markdown 语法示例,还展示了基本 HTML 元素是否在 Hugo 主题中使用 CSS 进行修饰。
@ -100,7 +101,7 @@ blockquote 元素表示从另一个来源引用的内容,可选地带有必须
type Registry interface { type Registry interface {
Register(*Service, ...RegisterOption) error Register(*Service, ...RegisterOption) error
Deregister(*Service, ...DeregisterOption) error Deregister(*Service, ...DeregisterOption) error
GetService(string, ...GetOption) ([]*Service, error) List(string, ...ListOption) ([]*Service, error)
} }
``` ```

View file

@ -21,7 +21,7 @@
</div> </div>
{{ end }} {{ end }}
</div> </div>
<main> <main class="mb-8">
<p>{{ .Description | markdownify | safeHTML }}</p> <p>{{ .Description | markdownify | safeHTML }}</p>
<article class="md"> <article class="md">
{{ .Content }} {{ .Content }}

View file

@ -1,16 +1,15 @@
{{ define "main" }} {{ define "main" }}
<main class="container mx-auto"> <main class="container mx-auto">
<h2 class="text-3xl font-bold">{{ .Title }}</h2> <h2 class="text-3xl font-bold mb-3">{{ .Title }}</h2>
<nav class="flex flex-col"> <ul class="list-disc">
{{ $data := .Data }} {{ $data := .Data }}
{{ range $key, $value := .Data.Terms.ByCount }} {{ range $key, $value := $data.Terms.ByCount }}
<div class="mb-5 flex justify-between"> <li>
<a class="self-start" href="{{ $data.Plural | relLangURL }}/{{ $value.Name }}"> <a class="text-lg" href="{{ $data.Plural | relLangURL }}/{{ $value.Name }}">{{ $value.Name }}</a>
{{ $value.Name }} <span class="text-sm font-semibold ml-1">{{ $value.Count }}</span>
</a> </li>
<span class="">{{ $value.Count }}</span> {{ end }}
</div> </ul>
{{ end }}
</nav> </nav>
</main> </main>
{{ end }} {{ end }}

View file

@ -1,12 +1,12 @@
<div> <div>
<div class="flex justify-between"> <div class="flex justify-between items-start">
{{ if .Page.Params.link }} {{ if .Page.Params.link }}
<a class="text-lg font-bold" href="{{ .Page.Params.link }}">{{ .Title }}</a> <a class="text-lg font-bold" href="{{ .Page.Params.link }}">{{ .Title }}</a>
{{ else }} {{ else }}
<a class="text-lg font-bold" href="{{ .RelPermalink }}">{{ .Title }}</a> <a class="text-lg font-bold" href="{{ .RelPermalink }}">{{ .Title }}</a>
{{ end }} {{ end }}
{{ if .Site.Params.displayDate }} {{ if .Site.Params.displayDate }}
<div class="text-sm font-bold">{{ .Date | time.Format (T "timeformat") }}</div> <div class="text-sm font-bold whitespace-nowrap">{{ .Date | time.Format (T "timeformat") }}</div>
{{ end }} {{ end }}
</div> </div>
{{ if .Site.Params.displayDescription }} {{ if .Site.Params.displayDescription }}

View file

@ -3,5 +3,5 @@
crossorigin="anonymous"> crossorigin="anonymous">
</script> </script>
<script> <script>
mermaid.init({theme: 'dark'}, 'code.language-mermaid') mermaid.init(undefined, 'code.language-mermaid')
</script> </script>

View file

@ -1,5 +1,9 @@
<script>
window.minima_theme = localStorage.getItem('theme')
</script>
{{ if or .Params.math .Site.Params.math }} {{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }} {{ partial "katex.html" . }}
{{ end }} {{ end }}
{{ if or .Params.mermaid .Site.Params.mermaid }} {{ if or .Params.mermaid .Site.Params.mermaid }}

View file

@ -1 +0,0 @@
<p class="mermaid">{{ safeHTML .Inner }}</p>