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

Merge pull request #80 from Junyi-99/feat-better-preview

Browse Source
This commit is contained in:
Junyi 2024-11-18 14:33:05 +08:00 committed by GitHub
commit 2b390c73d5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 107 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1 +1,2 @@
public/
public/
.DS_Store

2
README.md
View File

@ -53,7 +53,7 @@ name = "Junyi"
unsafe = true # true | false; Enable unsafe mode to have a better experience
[markup.highlight]
style = 'base16-snazzy' # Highlight.js style
style = 'base16-snazzy' # Chroma style, find more at here: https://swapoff.org/chroma/playground/
```

26
assets/css/main.css
View File

@ -154,14 +154,20 @@ thead {
table {
max-width: 100%;
display: block;
overflow: scroll;
border-spacing: 0;
border-collapse: collapse;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-size: 14px;
}
th,
td {
padding: 0.5em 1em;
padding: 0.25em 0.5em;
border: 1px double var(--table-border-color);
}
/* Code */
@ -175,7 +181,8 @@ kbd {
color: var(--pre-color);
background-color: var(--pre-bg-color);
font-family: 'Menlo', 'Courier New', 'Consolas', monospace;
font-size: 14.4px; /* 18px * 0.6 */
font-size: 14.4px;
/* 18px * 0.6 */
line-height: 154%;
border-radius: 6px;
border: 1px solid var(--pre-border-color);
@ -184,7 +191,8 @@ kbd {
/* <code> tag */
code {
font-size: 14.4px; /* 18px * 0.6 */
font-size: 14.4px;
/* 18px * 0.6 */
padding: 0.1em 0.3em;
}
@ -203,7 +211,8 @@ p kbd,
pre kbd,
p kbd kbd,
pre kbd kbd {
font-size: 14.4px; /* 18px * 0.6 */
font-size: 14.4px;
/* 18px * 0.6 */
background-color: var(--kbd-bg-color);
border: 1px solid var(--pre-border-color);
border-width: 1px 2px 2px 1px;
@ -249,11 +258,16 @@ div.highlight {
margin-bottom: 14px;
}
div.highlight div {
overflow: scroll;
}
div.highlight pre {
border: none;
display: grid;
margin: 0px;
overflow: auto; /* Have to add this line, otherwise the "pre" and "code" will have different width */
overflow: auto;
/* Have to add this line, otherwise the "pre" and "code" will have different width */
/* padding-left: 10px; */
/* padding-right: 10px; */
/* padding-top: 10px; */

44
exampleSiteMultilingual/content/posts/demo-multiline-codes.md
View File

@ -10,7 +10,31 @@ tags = [
]
+++
There are 9 tests.
```c {linenos=table, hl_lines=[1,"3-4",8], linenostart=199}
int main() {
int a = 1;
if (a == 999)
// This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
// If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
}
return 0;
}
```
## Truth Table
| Item | Line Numbers | Highlight Lines | Anchor Lines | Wide CodeBlock Scroll | Supported |
| ------------------------ | ------------ | --------------- | ------------ | --------------------- | --------- |
| **Full Feature Support** | ture | true | true | ✅ | ✅ |
| | table | true | true | ✅ | ✅ |
| | table | true | false | ✅ | ✅ |
| | inline | | | ✅ | ✅ |
| | ture | true | false | ✅ | ✅ |
| | ture | false | false | ✅ | ✅ |
| | false | true | / | ✅ | ✅ |
| Basic Support | false | false | / | ✅ | ✅ |
Note: Anubis2 does not support `hl_inline=true`
<!--more-->
@ -45,7 +69,7 @@ int main() {
int main() {
int a = 1;
if (a == 999)
// This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
// This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
// If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
}
return 0;
@ -102,30 +126,34 @@ Now you can click on the line number to get a link to that line.
int main() {
int a = 1;
if (a == 999)
// This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
// This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
// If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
}
return 0;
}
```
### Line Number (table) and Highlight Inline (❌ Not supported by Anubis2)
### Highlight Inline are not supported by Anubis2 ❌
```c {linenos=true,hl_lines=[1,"3-4",8], hl_inline=true}
```c {linenos=true,hl_lines=[1,3,5], hl_inline=true}
// codes ...
```
```c {linenos=true,hl_lines=[1,"3-4",8], hl_inline=true}
```c {linenos=true,hl_lines=[1,3,5], hl_inline=true}
int main() {
int a = 1;
if (a == 999)
// This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
// If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
}
return 0;
}
```
<!--
Those are trash codes.
### Highlight shortcode, with Line Number (table), with Highlight Lines and Anchor
{{</* highlight c "linenos=table,hl_lines=1 3-4 8, anchorlinenos=true" */>}}
@ -175,4 +203,4 @@ if (a == 999)
}
return 0;
}
{{< / highlight >}}
{{< / highlight >}} -->

2
exampleSiteMultilingual/content/posts/emoji-support.md
View File

@ -9,7 +9,7 @@ tags = [
+++
Emoji can be enabled in a Hugo project in a number of ways.
<!--more-->
The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.

2
exampleSiteMultilingual/content/posts/emoji-support.zh.md
View File

@ -10,8 +10,6 @@ tags = [
在 Hugo 博客里，你可以用多种方式使用 Emoji：
<!--more-->
The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.

1
exampleSiteMultilingual/content/posts/markdown-syntax.md
View File

@ -20,6 +20,7 @@ favorite = true
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.
<!--more-->
## Headings

29
exampleSiteMultilingual/content/posts/math-typesetting.md
View File

@ -2,38 +2,15 @@
author: Hugo Authors
title: Math Typesetting
date: 2019-03-08
description: A brief guide to setup KaTeX
description: A brief guide to setup MathJax
math: true
---
Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
<!--more-->
In this example we will be using [KaTeX](https://katex.org/)
- To enable MathJax on a page basis include the parameter `math: true` in content files.
- Create a partial under `/layouts/partials/math.html`
- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
- Include the partial in your templates like so:
```
{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}
```
- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
- To enable KaTex on a per page basis include the parameter `math: true` in content files.
**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
{{< math.inline >}}
{{ if or .Page.Params.math .Site.Params.math }}
<!-- KaTeX -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
{{ end }}
{{</ math.inline >}}
### Examples
## Examples
Inline math: $$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $$

2
exampleSiteMultilingual/content/posts/placeholder-text.md
View File

@ -31,7 +31,7 @@ tractus malis.
4. Arcanaque montibus omnes
5. Quidem et
# Vagus elidunt
## Vagus elidunt
<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>

4
exampleSiteMultilingual/hugo.toml
View File

@ -156,13 +156,13 @@ author = "authors"
defaultMarkdownHandler = 'goldmark'
[markup.goldmark.renderer]
unsafe = true
unsafe = true # Enable unsafe mode to have a better experience
[markup.highlight]
anchorLineNos = false
codeFences = true # tested with true and false. Both work.
noClasses = true # If you run with markup.highlight.noClasses=false in your site configuration, you need a style sheet.
style = 'base16-snazzy'
style = 'catppuccin-frappe' # Find more style at here: https://swapoff.org/chroma/playground/
tabWidth = 4
[params.UmamiAnalytics]

27
layouts/_default/single.html
View File

@ -53,29 +53,10 @@
*/}}
{{ if .Store.Get "hasMermaid" }}
{{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/load-mermaid.js") }}
{{ partial "mermaid_support.html" . }}
{{ end }}
{{ $colorTheme := "light" }}
{{ if and (site.Params.colortheme) (ne site.Params.colortheme "") }}
{{ $colorTheme = site.Params.colortheme | lower }}
{{ end }}
<script type="module">
function detectCurrentScheme3() {
const defaultTheme = "{{ $colorTheme }}";
if (localStorage !== null && localStorage.getItem("user-color-scheme")) {
return localStorage.getItem("user-color-scheme");
}
if (defaultTheme === "dark" || defaultTheme === "light") {
return defaultTheme;
}
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
window.mermaid = mermaid;
window.initMermaid()
document.body.dispatchEvent(new CustomEvent(detectCurrentScheme3() + "-theme-set"));
</script>
{{ if .Params.math }}
{{ partial "mathjax_support.html" . }}
{{ end }}
{{ end }}

1
layouts/index.html
View File

@ -8,6 +8,7 @@
{{ range (.Paginate $pages).Pages }}
{{ partial "post-summary.html" . }}
{{ end }}
{{ partial "pagination.html" . }}
</div>

2
layouts/partials/head.html
View File

@ -63,7 +63,7 @@
{{ with resources.Get . }}
{{ $r = . }}
{{ else }}
{{ errorf "error: You defined customCSS, but %s was not found, please check your config." . }}
{{ errorf "error: You defined customCSS, but %s was not found in the local file system, please check your config." . }}
{{ end }}
{{ if $r}}

24
layouts/partials/mermaid_support.html Normal file
View File

@ -0,0 +1,24 @@
{{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/load-mermaid.js") }}
{{ $colorTheme := "light" }}
{{ if and (site.Params.colortheme) (ne site.Params.colortheme "") }}
{{ $colorTheme = site.Params.colortheme | lower }}
{{ end }}
<script type="module">
function detectCurrentScheme3() {
const defaultTheme = "{{ $colorTheme }}";
if (localStorage !== null && localStorage.getItem("user-color-scheme")) {
return localStorage.getItem("user-color-scheme");
}
if (defaultTheme === "dark" || defaultTheme === "light") {
return defaultTheme;
}
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
window.mermaid = mermaid;
window.initMermaid()
document.body.dispatchEvent(new CustomEvent(detectCurrentScheme3() + "-theme-set"));
</script>

8
layouts/partials/post-summary.html
View File

@ -34,6 +34,14 @@
<a class="u-url" href="{{ .RelPermalink }}">{{ i18n "readMore" }}</a>
</div>
{{ end }}
{{ if .Store.Get "hasMermaid" }}
{{ partial "mermaid_support.html" . }}
{{ end }}
{{ if .Params.math }}
{{ partial "mathjax_support.html" . }}
{{ end }}
{{ partial "post-info.html" . }}
</article>

4
netlify.toml
View File

@ -1,13 +1,13 @@
[build]
publish = "exampleSiteMultilingual/public"
command = "cd exampleSiteMultilingual && hugo --theme hugo-theme-anubis2 --themesDir=../.. --baseURL $URL"
command = "cd exampleSiteMultilingual && hugo --themesDir=../.. --baseURL $URL"
[build.environment]
HUGO_VERSION = "0.136.5"
HUGO_THEME = "repo"
[context.deploy-preview]
command = "cd exampleSiteMultilingual && hugo --theme hugo-theme-anubis2 --themesDir=../.. --buildFuture --buildDrafts --baseURL $DEPLOY_PRIME_URL"
command = "cd exampleSiteMultilingual && hugo --themesDir=../.. --buildFuture --buildDrafts --baseURL $DEPLOY_PRIME_URL"
[[headers]]
for = "/*"