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-append (an extension that adds more functionality to nunjucks)
|
||||||
* nunjucks-markdown (markdown support in nunjucks)
|
* nunjucks-markdown (markdown support in nunjucks)
|
||||||
* marked (markdown parser/compiler)
|
* marked (markdown parser/compiler)
|
||||||
|
* highlight.js (syntax highlighting)
|
||||||
* chokidar (reload templates if they change on disk)
|
* chokidar (reload templates if they change on disk)
|
||||||
* fs (used for filesystem operations)
|
* 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,11 +121,11 @@ th, td {
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background-color: var(--grey3);
|
background-color: var(--grey3);
|
||||||
font-family: 'monospace';
|
font-family: monospace;
|
||||||
padding: .1rem .3rem;
|
padding: .1rem .3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
code.code-block {
|
pre > code {
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
|
||||||
|
|
@ -133,3 +133,7 @@ code.code-block {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
white-space: nowrap;
|
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" %}
|
{% extends "templates/article.njk" %}
|
||||||
{% import "components/toc.njk" as toc with context %}
|
{% import "components/toc.njk" as toc with context %}
|
||||||
|
{% import "components/code.njk" as code with context %}
|
||||||
|
|
||||||
{% block header %}
|
{% block header %}
|
||||||
Markdown
|
Markdown
|
||||||
|
|
@ -13,11 +14,7 @@
|
||||||
{% markdown %}
|
{% markdown %}
|
||||||
# Test of markdown
|
# Test of markdown
|
||||||
|
|
||||||
Lmao i mitt liv.
|
{{ code.import("code/test.js", "javascript") }}
|
||||||
|
|
||||||
```js
|
|
||||||
const testing = "a code block";
|
|
||||||
```
|
|
||||||
|
|
||||||
* A list item
|
* A list item
|
||||||
* A list item
|
* A list item
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
{% include "./defaultTags.njk" %}
|
{% include "./defaultTags.njk" %}
|
||||||
<link rel="stylesheet" href="/assets/css/article.css">
|
<link rel="stylesheet" href="/assets/css/article.css">
|
||||||
|
<link rel="stylesheet" href="/assets/css/syntax.css">
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<title>{{ serverName }}</title>
|
<title>{{ serverName }}</title>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
14
index.js
14
index.js
|
|
@ -5,7 +5,7 @@ import njkMarkdown from 'nunjucks-markdown'
|
||||||
import marked from 'marked'
|
import marked from 'marked'
|
||||||
import fs from 'fs'
|
import fs from 'fs'
|
||||||
import { requestHandler } from './libs/requestHandler.js'
|
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)
|
njkAppend.initialise(njkEnv)
|
||||||
njkMarkdown.register(njkEnv, marked)
|
njkMarkdown.register(njkEnv, marked)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chokidar": "^3.5.2",
|
"chokidar": "^3.5.2",
|
||||||
"express": "^4.17.1",
|
"express": "^4.17.1",
|
||||||
|
"highlight.js": "^9.18.1",
|
||||||
"marked": "^2.1.3",
|
"marked": "^2.1.3",
|
||||||
"nunjucks": "^3.2.3",
|
"nunjucks": "^3.2.3",
|
||||||
"nunjucks-append": "^0.0.3",
|
"nunjucks-append": "^0.0.3",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user