From 8531509faefbc1ab21b047211339431ffa2f0d6c Mon Sep 17 00:00:00 2001 From: Alvie Rahman Date: Wed, 1 Sep 2021 16:37:47 +0100 Subject: [PATCH] Add synatx highlighting --- readme.md | 8 +++++ styles.css | 73 ++++++++++++++++++++++++++++++++++++++++++ templates/article.html | 14 +++++--- 3 files changed, 91 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index 2ba50b6..81e7f69 100644 --- a/readme.md +++ b/readme.md @@ -90,3 +90,11 @@ Then you just have to point a webserver at `output-dir`. ``` # make uninstall ``` + +## Acknowledgements + +Default synatx highlighting is based off [Pygments](https://pygments.org/)' default theme and +made using Pandoc v2.7.2. +I found the theme [here](https://github.com/tajmone/pandoc-goodies/blob/master/skylighting/css/built-in-styles/pygments.css). + +Pretty sure the link colours are taken from [thebestmotherfucking.website](https://thebestmotherfucking.website/). diff --git a/styles.css b/styles.css index d9a698e..80835b6 100644 --- a/styles.css +++ b/styles.css @@ -115,3 +115,76 @@ kbd { margin-left: 0.2em; margin-right: 0.2em; } + +/* ============================================================================== + Pygments (pandoc built-in style) + ============================================================================== + Style based on Pygments' default colors. + + This stylesheet was produced using Pandoc v2.7.2. + + Pandoc is (c) 2006-2017 John MacFarlane (jgm@berkeley.edu). + Released under the GPL, version 2 or greater. + ------------------------------------------------------------------------------ +*/ +a.sourceLine { display: inline-block; line-height: 1.25; } +a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; } +a.sourceLine:empty { height: 1.2em; } +.sourceCode { overflow: visible; } +code.sourceCode { white-space: pre; position: relative; } +div.sourceCode { margin: 1em 0; } +pre.sourceCode { margin: 0; } +@media screen { +div.sourceCode { overflow: auto; } +} +@media print { +code.sourceCode { white-space: pre-wrap; } +a.sourceLine { text-indent: -1em; padding-left: 1em; } +} +pre.numberSource a.sourceLine + { position: relative; left: -4em; } +pre.numberSource a.sourceLine::before + { content: attr(title); + position: relative; left: -1em; text-align: right; vertical-align: baseline; + border: none; pointer-events: all; display: inline-block; + -webkit-touch-callout: none; -webkit-user-select: none; + -khtml-user-select: none; -moz-user-select: none; + -ms-user-select: none; user-select: none; + padding: 0 4px; width: 4em; + color: #aaaaaa; + } +pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; } +div.sourceCode + { } +@media screen { +a.sourceLine::before { text-decoration: underline; } +} +code span.al { color: #ff0000; font-weight: bold; } /* Alert */ +code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ +code span.at { color: #7d9029; } /* Attribute */ +code span.bn { color: #40a070; } /* BaseN */ +code span.bu { } /* BuiltIn */ +code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ +code span.ch { color: #4070a0; } /* Char */ +code span.cn { color: #880000; } /* Constant */ +code span.co { color: #60a0b0; font-style: italic; } /* Comment */ +code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */ +code span.do { color: #ba2121; font-style: italic; } /* Documentation */ +code span.dt { color: #902000; } /* DataType */ +code span.dv { color: #40a070; } /* DecVal */ +code span.er { color: #ff0000; font-weight: bold; } /* Error */ +code span.ex { } /* Extension */ +code span.fl { color: #40a070; } /* Float */ +code span.fu { color: #06287e; } /* Function */ +code span.im { } /* Import */ +code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */ +code span.kw { color: #007020; font-weight: bold; } /* Keyword */ +code span.op { color: #666666; } /* Operator */ +code span.ot { color: #007020; } /* Other */ +code span.pp { color: #bc7a00; } /* Preprocessor */ +code span.sc { color: #4070a0; } /* SpecialChar */ +code span.ss { color: #bb6688; } /* SpecialString */ +code span.st { color: #4070a0; } /* String */ +code span.va { color: #19177c; } /* Variable */ +code span.vs { color: #4070a0; } /* VerbatimString */ +code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ diff --git a/templates/article.html b/templates/article.html index 9c95e60..f33d1c3 100644 --- a/templates/article.html +++ b/templates/article.html @@ -11,11 +11,17 @@