alrayyes/wiki
1
0
Fork 0
mirror of https://github.com/alrayyes/wiki.git synced 2025-05-11 03:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

syntax higlighting

Browse source
This commit is contained in:
Jacky Zhao 2023-06-01 19:05:14 -04:00
parent 42d3a7de17
commit 04eeb2d10c
11 changed files with 198 additions and 44 deletions

2
quartz/bootstrap.mjs
View file

@ -60,7 +60,7 @@ yargs(hideBin(process.argv))
format: "cjs",
jsx: "automatic",
jsxImportSource: "preact",
external: ["@napi-rs/simple-git"],
external: ["@napi-rs/simple-git", "shiki"],
plugins: [sassPlugin({
type: 'css-text'
})]

14
quartz/components/Header.tsx Normal file
View file

@ -0,0 +1,14 @@
import { resolveToRoot } from "../path"
export interface HeaderProps {
title: string
slug: string
}
export default function({ title, slug }: HeaderProps) {
const baseDir = resolveToRoot(slug)
return <header>
<h1><a href={baseDir}>{title}</a></h1>
</header>
}

17
quartz/plugins/emitters/contentPage.tsx
View file

@ -6,13 +6,15 @@ import { Fragment, jsx, jsxs } from 'preact/jsx-runtime'
import { render } from "preact-render-to-string"
import { ComponentType } from "preact"
import { HeadProps } from "../../components/Head"
import styles from '../../styles/base.scss'
import { googleFontHref, templateThemeStyles } from "../../theme"
import { GlobalConfiguration } from "../../cfg"
import { HeaderProps } from "../../components/Header"
import styles from '../../styles/base.scss'
interface Options {
Head: ComponentType<HeadProps>
Header: ComponentType<HeaderProps>
}
export class ContentPage extends QuartzEmitterPlugin {
@ -37,23 +39,22 @@ export class ContentPage extends QuartzEmitterPlugin {
resources.css.push(googleFontHref(cfg.theme))
for (const [tree, file] of content) {
// @ts-ignore (preact makes it angry)
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
const { Head } = this.opts
const title = file.data.frontmatter?.title
const { Head, Header } = this.opts
const doc = <html>
<Head
title={file.data.frontmatter?.title ?? "Untitled"}
title={title ?? "Untitled"}
description={file.data.description ?? "No description provided"}
slug={file.data.slug!}
externalResources={resources} />
<body>
<div id="quartz-root" class="page">
<header>
<h1>{file.data.frontmatter?.title}</h1>
</header>
<Header title={cfg.siteTitle} slug={file.data.slug!} />
<article>
{file.data.slug !== "index" && <h1>{title}</h1>}
{content}
</article>
</div>

1
quartz/plugins/transformers/index.ts
View file

@ -5,3 +5,4 @@ export { Katex } from './latex'
export { Description } from './description'
export { ResolveLinks } from './links'
export { ObsidianFlavoredMarkdown } from './ofm'
export { SyntaxHighlighting } from './syntax'

28
quartz/plugins/transformers/syntax.ts Normal file
View file

@ -0,0 +1,28 @@
import { PluggableList } from "unified"
import { QuartzTransformerPlugin } from "../types"
import rehypePrettyCode, { Options as CodeOptions } from "rehype-pretty-code"
export class SyntaxHighlighting extends QuartzTransformerPlugin {
name = "SyntaxHighlighting"
markdownPlugins(): PluggableList {
return []
}
htmlPlugins(): PluggableList {
return [[rehypePrettyCode, {
theme: 'css-variables',
onVisitLine(node) {
if (node.children.length === 0) {
node.children = [{ type: 'text', value: ' ' }]
}
},
onVisitHighlightedLine(node) {
node.properties.className.push('highlighted')
},
onVisitHighlightedWord(node) {
node.properties.className = ['word']
},
} satisfies Partial<CodeOptions>]]
}
}

60
quartz/styles/base.scss
View file

@ -108,41 +108,41 @@ div[data-rehype-pretty-code-fragment] {
margin-bottom: -0.8rem;
color: var(--darkgray);
}
}
& pre {
font-family: var(--codeFont);
padding: 0.5rem 0;
border-radius: 5px;
overflow-x: scroll;
border: 1px solid var(--lightgray);
pre {
font-family: var(--codeFont);
padding: 0.5rem;
border-radius: 5px;
overflow-x: scroll;
border: 1px solid var(--lightgray);
& > code {
background: none;
padding: 0;
font-size: 0.9rem;
counter-reset: line;
counter-increment: line 0;
display: grid;
& > code {
background: none;
padding: 0;
font-size: 0.9rem;
counter-reset: line;
counter-increment: line 0;
display: grid;
& .line {
padding: 0 0.75rem;
box-sizing: border-box;
border-left: 3px solid transparent;
& .line {
padding: 0 0.25rem;
box-sizing: border-box;
border-left: 3px solid transparent;
&.highlighted {
background-color: var(--highlight);
border-left: 3px solid var(--secondary);
}
&.highlighted {
background-color: var(--highlight);
border-left: 3px solid var(--secondary);
}
&::before {
content: counter(line);
counter-increment: line;
width: 1rem;
margin-right: 1rem;
display: inline-block;
text-align: right;
color: rgba(115, 138, 148, 0.4);
}
&::before {
content: counter(line);
counter-increment: line;
width: 1rem;
margin-right: 1rem;
display: inline-block;
text-align: right;
color: rgba(115, 138, 148, 0.4);
}
}
}

4
quartz/styles/syntax.scss
View file

@ -1,5 +1,5 @@
// npx convert-sh-theme https://raw.githubusercontent.com/shikijs/shiki/main/packages/shiki/themes/github-light.json
body {
:root {
--shiki-color-text: #24292e;
--shiki-color-background: #f8f8f8;
--shiki-token-constant: #005cc5;
@ -14,7 +14,7 @@ body {
}
// npx convert-sh-theme https://raw.githubusercontent.com/shikijs/shiki/main/packages/shiki/themes/github-dark.json
:root[saved-theme="dark"] body {
:root[saved-theme="dark"] {
--shiki-color-text: #e1e4e8 !important;
--shiki-color-background: #24292e !important;
--shiki-token-constant: #79b8ff !important;