Fixed syntax highlighting.
This commit is contained in:
parent
562acb70a9
commit
ee5d6c5ef1
|
|
@ -31,6 +31,7 @@ The project depends on the following packages (installed when you ran `npm i`):
|
|||
* nunjucks-append (an extension that adds more functionality to nunjucks)
|
||||
* nunjucks-markdown (markdown support in nunjucks)
|
||||
* marked (markdown parser/compiler)
|
||||
* highlight.js (syntax highlighting)
|
||||
* chokidar (reload templates if they change on disk)
|
||||
* fs (used for filesystem operations)
|
||||
|
||||
|
|
|
|||
152
assets/css/syntax.css
Normal file
152
assets/css/syntax.css
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
.hljs-keyword {
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
.hljs-built_in {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.hljs-type {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.hljs-number {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.hljs-punctuation {
|
||||
color: var(--grey14);
|
||||
}
|
||||
|
||||
.hljs-property {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.hljs-regexp {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.hljs-string {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.hljs-char.escape {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.hljs-symbol {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.hljs-variable {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.hljs-variable.language {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.hljs-variable.constant {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.hljs-title {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.hljs-title.class {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.hljs-title.class.inherited {
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
.hljs-title.function {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.hljs-params {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.hljs-comment {
|
||||
color: var(--grey9);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-doctag {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.hljs-meta {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.hljs-meta .hljs-keyword {
|
||||
color: var(--indigo);
|
||||
}
|
||||
|
||||
.hljs-section {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.hljs-name {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.hljs-attr {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.hljs-attribute {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.hljs-selector-tag {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.hljs-selector-id {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.hljs-selector-class {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.hljs-selector-attr {
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
.hljs-selector-pseudo {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.hljs-template-tag {
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
.hljs-template-variable {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: var(--red);
|
||||
}
|
||||
|
|
@ -121,15 +121,19 @@ th, td {
|
|||
|
||||
code {
|
||||
background-color: var(--grey3);
|
||||
font-family: 'monospace';
|
||||
font-family: monospace;
|
||||
padding: .1rem .3rem;
|
||||
}
|
||||
|
||||
code.code-block {
|
||||
pre > code {
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
code * {
|
||||
font-family: monospace;
|
||||
}
|
||||
12
content/code/test.js
Normal file
12
content/code/test.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
const niceObject = {
|
||||
type: "the greatest",
|
||||
knownFor: [
|
||||
"indenting",
|
||||
"everything",
|
||||
{
|
||||
and: "wanting",
|
||||
to: "keep",
|
||||
it: "so"
|
||||
}
|
||||
]
|
||||
}
|
||||
8
content/components/code.njk
Normal file
8
content/components/code.njk
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{% macro import(path, lang) %}
|
||||
```{{ lang }}
|
||||
{% set code %}
|
||||
{% include path %}
|
||||
{% endset %}
|
||||
{{ code | replace(" ", "•") }}
|
||||
```
|
||||
{% endmacro %}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
{% extends "templates/article.njk" %}
|
||||
{% import "components/toc.njk" as toc with context %}
|
||||
{% import "components/code.njk" as code with context %}
|
||||
|
||||
{% block header %}
|
||||
Markdown
|
||||
|
|
@ -13,18 +14,14 @@
|
|||
{% markdown %}
|
||||
# Test of markdown
|
||||
|
||||
Lmao i mitt liv.
|
||||
|
||||
```js
|
||||
const testing = "a code block";
|
||||
```
|
||||
{{ code.import("code/test.js", "javascript") }}
|
||||
|
||||
* A list item
|
||||
* A list item
|
||||
* A list item
|
||||
* A list item
|
||||
|
||||
*italic* **bold**
|
||||
*italic* **bold**
|
||||
|
||||
{{ toc.header("h1", "test header") }}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
{% include "./defaultTags.njk" %}
|
||||
<link rel="stylesheet" href="/assets/css/article.css">
|
||||
<link rel="stylesheet" href="/assets/css/syntax.css">
|
||||
{% block head %}
|
||||
<title>{{ serverName }}</title>
|
||||
{% endblock %}
|
||||
|
|
|
|||
14
index.js
14
index.js
|
|
@ -5,7 +5,7 @@ import njkMarkdown from 'nunjucks-markdown'
|
|||
import marked from 'marked'
|
||||
import fs from 'fs'
|
||||
import { requestHandler } from './libs/requestHandler.js'
|
||||
import { markedRenderer } from './libs/markedRenderer.js'
|
||||
import hljs from 'highlight.js'
|
||||
|
||||
|
||||
|
||||
|
|
@ -29,6 +29,18 @@ const njkEnv = njk.configure(
|
|||
}
|
||||
)
|
||||
|
||||
marked.setOptions({
|
||||
highlight: (code, lang) => {
|
||||
const language = hljs.getLanguage(lang) ? lang : 'plaintext'
|
||||
return hljs.highlight(language, code)
|
||||
.value.replace(/\n/g, "<br>").replace(/•/g, " ")
|
||||
},
|
||||
gfm: true,
|
||||
smartypants: true,
|
||||
smartLists: true,
|
||||
silent: true
|
||||
})
|
||||
|
||||
njkAppend.initialise(njkEnv)
|
||||
njkMarkdown.register(njkEnv, marked)
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
"dependencies": {
|
||||
"chokidar": "^3.5.2",
|
||||
"express": "^4.17.1",
|
||||
"highlight.js": "^9.18.1",
|
||||
"marked": "^2.1.3",
|
||||
"nunjucks": "^3.2.3",
|
||||
"nunjucks-append": "^0.0.3",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user