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 @@
 <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 %}
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, "<br>").replace(/•/g, "&nbsp;")
+    },
+    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",