diff --git a/.eleventy.js b/.eleventy.js index af58612..bc79c63 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,5 +1,6 @@ const pluginRss = require('@11ty/eleventy-plugin-rss') const pluginToc = require('eleventy-plugin-nesting-toc') +const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight') // extra features for markdown const markdownIt = require('markdown-it') @@ -13,13 +14,15 @@ const header = require('./src/_includes/filters/header') module.exports = function (config) { config.addPlugin(pluginRss) config.addPlugin(pluginToc) + config.addPlugin(pluginSyntaxHighlight) - config.setBrowserSyncConfig({ - files: './_site/assets/*.css' - }) + config.setBrowserSyncConfig({ + files: './_site/assets/*.css' + }) config.addPassthroughCopy('src/assets/key.txt') config.addPassthroughCopy('src/assets/ibm-plex/IBM-Plex-Mono/fonts/**/*') + config.addPassthroughCopy('src/assets/prism-base16-ateliersulphurpool.light.css') config.addPassthroughCopy('src/posts/**/*.{jpeg,jpg,png,webp}') // configure markdown diff --git a/package.json b/package.json index 2334e87..0ec919e 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ }, "dependencies": { "@11ty/eleventy-plugin-rss": "^1.1.2", + "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0", "@remy/webmention": "^1.4.5", "@types/markdown-it": "^12.2.3", "autoprefixer": "^10.4.12", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c7812d0..ad87c7a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3,6 +3,7 @@ lockfileVersion: 5.4 specifiers: '@11ty/eleventy': ^2.0.0-canary.16 '@11ty/eleventy-plugin-rss': ^1.1.2 + '@11ty/eleventy-plugin-syntaxhighlight': ^4.1.0 '@remy/webmention': ^1.4.5 '@thi.ng/hiccup': 3.6.22 '@types/markdown-it': ^12.2.3 @@ -20,6 +21,7 @@ specifiers: dependencies: '@11ty/eleventy-plugin-rss': 1.1.2 + '@11ty/eleventy-plugin-syntaxhighlight': 4.1.0 '@remy/webmention': 1.4.5 '@types/markdown-it': 12.2.3 autoprefixer: 10.4.12_postcss@8.4.17 @@ -76,6 +78,13 @@ packages: - supports-color dev: false + /@11ty/eleventy-plugin-syntaxhighlight/4.1.0: + resolution: {integrity: sha512-bLpV8DKFZRgh0kToh8JPCjABfalL5ydyP6rxj/aUgrlR2v9TheLGRNqoKMhfgwUETOas2nMo/rd7sCE4kSvBNQ==} + dependencies: + linkedom: 0.13.7 + prismjs: 1.29.0 + dev: false + /@11ty/eleventy-utils/1.0.1: resolution: {integrity: sha512-HPpCTz4PzudcQU+i+x6GSNHVqgnvRhnVYg5dLKaAoRWLN966odAGsBxKSyhF8i1MdlOPtsytYb2AGWP7jISC5w==} engines: {node: '>=12'} @@ -580,6 +589,16 @@ packages: nth-check: 1.0.2 dev: false + /css-select/4.3.0: + resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==} + dependencies: + boolbase: 1.0.0 + css-what: 6.1.0 + domhandler: 4.3.1 + domutils: 2.8.0 + nth-check: 2.1.1 + dev: false + /css-select/5.1.0: resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} dependencies: @@ -599,6 +618,10 @@ packages: engines: {node: '>= 6'} dev: false + /cssom/0.5.0: + resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==} + dev: false + /d/0.1.1: resolution: {integrity: sha1-2hhMU10Y2O57oqoim5FACfrhEwk=} dependencies: @@ -1095,6 +1118,10 @@ packages: function-bind: 1.1.1 dev: true + /html-escaper/3.0.3: + resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==} + dev: false + /htmlparser2/3.10.1: resolution: {integrity: sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==} dependencies: @@ -1122,7 +1149,6 @@ packages: domhandler: 4.3.1 domutils: 2.8.0 entities: 3.0.1 - dev: true /htmlparser2/8.0.1: resolution: {integrity: sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==} @@ -1304,6 +1330,16 @@ packages: engines: {node: '>=10'} dev: false + /linkedom/0.13.7: + resolution: {integrity: sha512-We9cyPHV/exsrC43KXtItjqSTxwrK9pLpOnG6TLzqXrmqwe/wqd3Gi6eAAU4YCqfTgy79R8g75hY2fS7723XUg==} + dependencies: + css-select: 4.3.0 + cssom: 0.5.0 + html-escaper: 3.0.3 + htmlparser2: 7.2.0 + uhyphen: 0.1.0 + dev: false + /linkify-it/4.0.1: resolution: {integrity: sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==} dependencies: @@ -1830,6 +1866,11 @@ packages: engines: {node: '>= 0.8'} dev: false + /prismjs/1.29.0: + resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==} + engines: {node: '>=6'} + dev: false + /promise-each/2.2.0: resolution: {integrity: sha1-M1MXTv8mlEgQN+BOAfd6oPttG2A=} dependencies: @@ -2192,6 +2233,10 @@ packages: dev: true optional: true + /uhyphen/0.1.0: + resolution: {integrity: sha512-o0QVGuFg24FK765Qdd5kk0zU/U4dEsCtN/GSiwNI9i8xsSVtjIAOdTaVhLwZ1nrbWxFVMxNDDl+9fednsOMsBw==} + dev: false + /universalify/2.0.0: resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==} engines: {node: '>= 10.0.0'} diff --git a/src/_includes/root.njk b/src/_includes/root.njk index d46ae2e..2513200 100644 --- a/src/_includes/root.njk +++ b/src/_includes/root.njk @@ -6,6 +6,7 @@ {% if title %}{{ title }} | {% endif %}{{ page.title }} + diff --git a/src/assets/prism-base16-ateliersulphurpool.light.css b/src/assets/prism-base16-ateliersulphurpool.light.css new file mode 100644 index 0000000..37c8a9f --- /dev/null +++ b/src/assets/prism-base16-ateliersulphurpool.light.css @@ -0,0 +1,176 @@ +/* + +Name: Base16 Atelier Sulphurpool Light +Author: Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool) + +Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/) +Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) + +*/ +code[class*="language-"], +pre[class*="language-"] { + font-size: 14px; + line-height: 1.375; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + /* background: #f5f7ff; */ + color: #5e6687; +} + +pre > code[class*="language-"] { + font-size: 1em; +} + +/*pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #dfe2f1; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #dfe2f1; +}*/ + +/* Code blocks */ +pre[class*="language-"] { + /* padding: 1em; + margin: .5em 0; */ + overflow: auto; +} + +/* Inline code */ +/* +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +}*/ + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #898ea4; +} + +.token.punctuation { + color: #5e6687; +} + +.token.namespace { + opacity: .7; +} + +.token.operator, +.token.boolean, +.token.number { + color: #c76b29; +} + +.token.property { + color: #c08b30; +} + +.token.tag { + color: #3d8fd1; +} + +.token.string { + color: #22a2c9; +} + +.token.selector { + color: #6679cc; +} + +.token.attr-name { + color: #c76b29; +} + +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #22a2c9; +} + +.token.attr-value, +.token.keyword, +.token.control, +.token.directive, +.token.unit { + color: #ac9739; +} + +.token.statement, +.token.regex, +.token.atrule { + color: #22a2c9; +} + +.token.placeholder, +.token.variable { + color: #3d8fd1; +} + +.token.deleted { + text-decoration: line-through; +} + +.token.inserted { + border-bottom: 1px dotted #202746; + text-decoration: none; +} + +.token.italic { + font-style: italic; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.important { + color: #c94922; +} + +.token.entity { + cursor: help; +} + +pre > code.highlight { + outline: 0.4em solid #c94922; + outline-offset: .4em; +} + +/* overrides color-values for the Line Numbers plugin + * http://prismjs.com/plugins/line-numbers/ + */ +.line-numbers.line-numbers .line-numbers-rows { + border-right-color: #dfe2f1; +} + +.line-numbers .line-numbers-rows > span:before { + color: #979db4; +} + +/* overrides color-values for the Line Highlight plugin + * http://prismjs.com/plugins/line-highlight/ + */ +.line-highlight.line-highlight { + background: rgba(107, 115, 148, 0.2); + background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0)); + background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0)); +} diff --git a/src/assets/style.scss b/src/assets/style.scss index aa3f1c3..3f337c3 100644 --- a/src/assets/style.scss +++ b/src/assets/style.scss @@ -319,7 +319,7 @@ footer { pre { padding: 12px; - margin: 12px 0 32px; + margin: 0 0 16px; background: $reduced-1; }