From d8dcfbcda187c16d799727729d6f93a4637e9799 Mon Sep 17 00:00:00 2001 From: Garrett Mills Date: Tue, 25 Mar 2025 21:43:54 -0400 Subject: [PATCH] Syntax highlighting + a couple other plugins --- eleventy.config.js | 5 +- package.json | 1 + pnpm-lock.yaml | 16 ++++ src/assets/css/prism-cb.css | 146 ++++++++++++++++++++++++++++++++++++ src/css-bundle.njk | 1 + 5 files changed, 168 insertions(+), 1 deletion(-) create mode 100644 src/assets/css/prism-cb.css diff --git a/eleventy.config.js b/eleventy.config.js index 7bb790b..a9549cf 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,7 +1,8 @@ import pugPlugin from "@11ty/eleventy-plugin-pug"; import brokenLinksPlugin from "eleventy-plugin-broken-links"; import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"; -import { EleventyRenderPlugin } from '@11ty/eleventy'; +import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight"; +import { EleventyRenderPlugin, IdAttributePlugin } from '@11ty/eleventy'; import * as fs from 'fs'; import * as opml from 'opml'; @@ -9,6 +10,7 @@ export default function (eleventyConfig) { eleventyConfig.setInputDirectory("src") eleventyConfig.addPlugin(brokenLinksPlugin); eleventyConfig.addPlugin(pugPlugin); + eleventyConfig.addPlugin(syntaxHighlight); eleventyConfig.addPlugin(eleventyImageTransformPlugin, { htmlOptions: { imgAttributes: { @@ -16,6 +18,7 @@ export default function (eleventyConfig) { }, }, }); + eleventyConfig.addPlugin(IdAttributePlugin); eleventyConfig.addPlugin(EleventyRenderPlugin); eleventyConfig.addPassthroughCopy("src/assets/**") diff --git a/package.json b/package.json index 5f8cc73..5a6a840 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@11ty/eleventy": "^3.0.0", "@11ty/eleventy-img": "^6.0.1", "@11ty/eleventy-plugin-pug": "^1.0.0", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "eleventy-plugin-broken-links": "^2.2.1", "opml": "^0.5.7" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ff9c66f..d4380ae 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@11ty/eleventy-plugin-pug': specifier: ^1.0.0 version: 1.0.0 + '@11ty/eleventy-plugin-syntaxhighlight': + specifier: ^5.0.0 + version: 5.0.0 eleventy-plugin-broken-links: specifier: ^2.2.1 version: 2.2.1 @@ -57,6 +60,9 @@ packages: resolution: {integrity: sha512-7o9SQqbHfiIctfvWpbP6tibzM1R5YnC97yrMn8r8nPGA3umGbbSMUFr9sx4lepLbfzqd21svhq9X3SJRhj4xpg==} engines: {node: '>=18'} + '@11ty/eleventy-plugin-syntaxhighlight@5.0.0': + resolution: {integrity: sha512-y9BUmP1GofmbJgxM1+ky/UpFCpD8JSOeLeKItUs0WApgnrHk9haHziW7lS86lbArX5SiCVo4zTTw9x53gvRCaA==} + '@11ty/eleventy-utils@1.0.3': resolution: {integrity: sha512-nULO91om7vQw4Y/UBjM8i7nJ1xl+/nyK4rImZ41lFxiY2d+XUz7ChAj1CDYFjrLZeu0utAYJTZ45LlcHTkUG4g==} engines: {node: '>=12'} @@ -1085,6 +1091,10 @@ packages: resolution: {integrity: sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==} engines: {node: '>=12.0.0'} + prismjs@1.30.0: + resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==} + engines: {node: '>=6'} + promise@7.3.1: resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==} @@ -1459,6 +1469,10 @@ snapshots: transitivePeerDependencies: - supports-color + '@11ty/eleventy-plugin-syntaxhighlight@5.0.0': + dependencies: + prismjs: 1.30.0 + '@11ty/eleventy-utils@1.0.3': dependencies: normalize-path: 3.0.0 @@ -2463,6 +2477,8 @@ snapshots: posthtml-parser: 0.11.0 posthtml-render: 3.0.0 + prismjs@1.30.0: {} + promise@7.3.1: dependencies: asap: 2.0.6 diff --git a/src/assets/css/prism-cb.css b/src/assets/css/prism-cb.css new file mode 100644 index 0000000..146efe5 --- /dev/null +++ b/src/assets/css/prism-cb.css @@ -0,0 +1,146 @@ +/* + * Based on Plugin: Syntax Highlighter CB + * Plugin URI: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js + * Description: Highlight your code snippets with an easy to use shortcode based on Lea Verou's Prism.js. + * Version: 1.0.0 + * Author: c.bavota + * Author URI: http://bavotasan.comhttp://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js/ */ +/* http://cbavota.bitbucket.org/syntax-highlighter/ */ + +/* ===== ===== */ +code[class*="language-"], +pre[class*="language-"] { + color: #fff; + text-shadow: 0 1px 1px #000; + font-family: Menlo, Monaco, "Courier New", monospace; + direction: ltr; + text-align: left; + word-spacing: normal; + white-space: pre; + word-wrap: normal; + line-height: 1.4; + background: none; + border: 0; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"] code { + float: left; + padding: 0 15px 0 0; +} + +pre[class*="language-"], +:not(pre) > code[class*="language-"] { + background: #222; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 15px; + margin: 1em 0; + overflow: auto; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: 5px 10px; + line-height: 1; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #797979; +} + +.token.selector, +.token.operator, +.token.punctuation { + color: #fff; +} + +.token.namespace { + opacity: .7; +} + +.token.tag, +.token.boolean { + color: #ffd893; +} + +.token.atrule, +.token.attr-value, +.token.hex, +.token.string { + color: #B0C975; +} + +.token.property, +.token.entity, +.token.url, +.token.attr-name, +.token.keyword { + color: #c27628; +} + +.token.regex { + color: #9B71C6; +} + +.token.entity { + cursor: help; +} + +.token.function, +.token.constant { + color: #e5a638; +} + +.token.variable { + color: #fdfba8; +} + +.token.number { + color: #8799B0; +} + +.token.important, +.token.deliminator { + color: #E45734; +} + +/* Line highlight plugin */ +.line-highlight.line-highlight { + background: rgba(255, 255, 255, .2); +} + +.line-highlight.line-highlight:before, +.line-highlight.line-highlight[data-end]:after { + top: .3em; + background-color: rgba(255, 255, 255, .3); + color: #fff; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; +} + +/* for line numbers */ +/* span instead of span:before for a two-toned border */ +.line-numbers .line-numbers-rows > span { + border-right: 3px #d9d336 solid; +} diff --git a/src/css-bundle.njk b/src/css-bundle.njk index ef09174..bbae98e 100644 --- a/src/css-bundle.njk +++ b/src/css-bundle.njk @@ -2,4 +2,5 @@ permalink: bundle.css --- {% include "./assets/css/normalize.css" %} +{% include "./assets/css/prism-cb.css" %} {% include "./assets/css/obsidian.css" %}