dsh/blog
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Use HLJS, and add the Tomorrow theme.

Browse Source
This commit is contained in:
Dave Smith-Hayes 2024-07-31 22:24:23 -04:00
parent 5ea1aa9c5b
commit d7c16c6763
5 changed files with 63 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

2
package.json
View File

@ -5,8 +5,10 @@
}, },
"dependencies": { "dependencies": {
"@types/yaml-front-matter": "^4.1.3", "@types/yaml-front-matter": "^4.1.3",
"highlight.js": "^11.10.0",
"hono": "^4.4.13", "hono": "^4.4.13",
"marked": "^13.0.2", "marked": "^13.0.2",
"marked-highlight": "^2.1.3",
"remark": "^15.0.1", "remark": "^15.0.1",
"yaml-front-matter": "^4.1.1" "yaml-front-matter": "^4.1.1"
}, },

44
src/assets/static/tomorrow.css Normal file
View File

@ -0,0 +1,44 @@
/* Tomorrow Theme */
/* https://jmblog.github.io/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* https://jmblog.github.io/color-themes-for-google-code-highlightjs */
.tomorrow-comment, pre .comment, pre .title {
color: #8e908c;
}
.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
color: #c82829;
}
.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
color: #f5871f;
}
.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
color: #eab700;
}
.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
color: #718c00;
}
.tomorrow-aqua, pre .css .hexcolor {
color: #3e999f;
}
.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
color: #4271ae;
}
.tomorrow-purple, pre .keyword, pre .javascript .function {
color: #8959a8;
}
pre code {
display: block;
background: white;
color: #4d4d4c;
line-height: 1.5;
border: 1px solid #ccc;
padding: 10px;
}

17
src/services/post-file.ts
View File

@ -2,12 +2,27 @@ import { POST_PATH } from "@blog/config";
import { readdir } from "node:fs/promises"; import { readdir } from "node:fs/promises";
import type { Post } from "@blog/models/Post"; import type { Post } from "@blog/models/Post";
import * as yamlFront from "yaml-front-matter"; import * as yamlFront from "yaml-front-matter";
import { marked } from "marked"; import { Marked } from "marked";
import { markedHighlight } from "marked-highlight";
import hljs from "highlight.js";
export function getMarkedInstance(): Marked {
return new Marked(
markedHighlight({
langPrefix: 'hljs language-',
highlight(code, lang, info) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
}
})
)
}
export async function readPostFile(path: string): Promise<Post> { export async function readPostFile(path: string): Promise<Post> {
const file = Bun.file(path); const file = Bun.file(path);
const fileContent = await file.text(); const fileContent = await file.text();
const parsedData = yamlFront.loadFront(fileContent); const parsedData = yamlFront.loadFront(fileContent);
const marked: Marked = getMarkedInstance();
const postHtml = await marked.parse(parsedData.__content); const postHtml = await marked.parse(parsedData.__content);
let slug = parsedData.slug; let slug = parsedData.slug;

1
src/templates/Page.tsx
View File

@ -14,6 +14,7 @@ export function Page({ children, meta }: { children: any, meta: SiteMeta }) {
<MetaTags meta={meta} /> <MetaTags meta={meta} />
<Style /> <Style />
<link rel="stylesheet" href="/static/main.css" /> <link rel="stylesheet" href="/static/main.css" />
<link rel="stylesheet" href="/static/tomorrow.css" />
</head> </head>
<body> <body>
<header> <header>