From ee5d6c5ef1a33deeeeeaa0875fdc8141020ccde1 Mon Sep 17 00:00:00 2001 From: BurnyLlama Date: Wed, 4 Aug 2021 22:52:49 +0200 Subject: [PATCH] Fixed syntax highlighting. --- README.md | 1 + assets/css/syntax.css | 152 +++++++++++++++++++++++++++++ assets/css/theme.css | 8 +- content/code/test.js | 12 +++ content/components/code.njk | 8 ++ content/pages/article/markdown.njk | 9 +- content/templates/article.njk | 1 + index.js | 14 ++- package.json | 1 + 9 files changed, 197 insertions(+), 9 deletions(-) create mode 100644 assets/css/syntax.css create mode 100644 content/code/test.js create mode 100644 content/components/code.njk diff --git a/README.md b/README.md index dc63d72..9f033fa 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/assets/css/syntax.css b/assets/css/syntax.css new file mode 100644 index 0000000..0f7eef0 --- /dev/null +++ b/assets/css/syntax.css @@ -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); +} \ No newline at end of file diff --git a/assets/css/theme.css b/assets/css/theme.css index a550bbb..b1a00fc 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -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; } \ No newline at end of file diff --git a/content/code/test.js b/content/code/test.js new file mode 100644 index 0000000..84a7eda --- /dev/null +++ b/content/code/test.js @@ -0,0 +1,12 @@ +const niceObject = { + type: "the greatest", + knownFor: [ + "indenting", + "everything", + { + and: "wanting", + to: "keep", + it: "so" + } + ] +} \ No newline at end of file diff --git a/content/components/code.njk b/content/components/code.njk new file mode 100644 index 0000000..9ff1783 --- /dev/null +++ b/content/components/code.njk @@ -0,0 +1,8 @@ +{% macro import(path, lang) %} +```{{ lang }} +{% set code %} +{% include path %} +{% endset %} +{{ code | replace(" ", "•") }} +``` +{% endmacro %} \ No newline at end of file diff --git a/content/pages/article/markdown.njk b/content/pages/article/markdown.njk index e39e92c..5672de6 100644 --- a/content/pages/article/markdown.njk +++ b/content/pages/article/markdown.njk @@ -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") }} diff --git a/content/templates/article.njk b/content/templates/article.njk index 8677795..791ba21 100644 --- a/content/templates/article.njk +++ b/content/templates/article.njk @@ -3,6 +3,7 @@ {% include "./defaultTags.njk" %} + {% block head %} {{ serverName }} {% endblock %} diff --git a/index.js b/index.js index 0be83eb..32525d7 100644 --- a/index.js +++ b/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, "
").replace(/•/g, " ") + }, + gfm: true, + smartypants: true, + smartLists: true, + silent: true +}) + njkAppend.initialise(njkEnv) njkMarkdown.register(njkEnv, marked) diff --git a/package.json b/package.json index e1c4e96..71d27f7 100644 --- a/package.json +++ b/package.json @@ -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",