Install syntax highlighting plugin and stylesheet
This commit is contained in:
parent
8de774111e
commit
f9359c89de
|
@ -1,6 +1,7 @@
|
||||||
// Installed Plugins
|
// Installed Plugins
|
||||||
import pluginRss from "@11ty/eleventy-plugin-rss";
|
import pluginRss from "@11ty/eleventy-plugin-rss";
|
||||||
import pluginEleventyNavigation from "@11ty/eleventy-navigation";
|
import pluginEleventyNavigation from "@11ty/eleventy-navigation";
|
||||||
|
import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
|
||||||
import pluginEmbedEverything from "eleventy-plugin-embed-everything";
|
import pluginEmbedEverything from "eleventy-plugin-embed-everything";
|
||||||
import pluginMetagen from "eleventy-plugin-metagen";
|
import pluginMetagen from "eleventy-plugin-metagen";
|
||||||
import pluginEmojiReadTime from "@11tyrocks/eleventy-plugin-emoji-readtime";
|
import pluginEmojiReadTime from "@11tyrocks/eleventy-plugin-emoji-readtime";
|
||||||
|
@ -17,6 +18,7 @@ export default function(eleventyConfig) {
|
||||||
// Installed Plugins
|
// Installed Plugins
|
||||||
eleventyConfig.addPlugin(pluginRss);
|
eleventyConfig.addPlugin(pluginRss);
|
||||||
eleventyConfig.addPlugin(pluginEleventyNavigation);
|
eleventyConfig.addPlugin(pluginEleventyNavigation);
|
||||||
|
eleventyConfig.addPlugin(pluginSyntaxHighlight, { preAttributes: { tabindex: 0 } });
|
||||||
eleventyConfig.addPlugin(pluginEmbedEverything, { add: ['soundcloud'] });
|
eleventyConfig.addPlugin(pluginEmbedEverything, { add: ['soundcloud'] });
|
||||||
eleventyConfig.addPlugin(pluginMetagen);
|
eleventyConfig.addPlugin(pluginMetagen);
|
||||||
eleventyConfig.addPlugin(pluginEmojiReadTime);
|
eleventyConfig.addPlugin(pluginEmojiReadTime);
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
"@11ty/eleventy": "^3.0.0-beta.1",
|
"@11ty/eleventy": "^3.0.0-beta.1",
|
||||||
"@11ty/eleventy-navigation": "^0.3.5",
|
"@11ty/eleventy-navigation": "^0.3.5",
|
||||||
"@11ty/eleventy-plugin-rss": "^2.0.2",
|
"@11ty/eleventy-plugin-rss": "^2.0.2",
|
||||||
|
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
|
||||||
"@11tyrocks/eleventy-plugin-emoji-readtime": "^1.0.1",
|
"@11tyrocks/eleventy-plugin-emoji-readtime": "^1.0.1",
|
||||||
"@uncenter/eleventy-plugin-toc": "^1.0.3",
|
"@uncenter/eleventy-plugin-toc": "^1.0.3",
|
||||||
"@zachleat/details-utils": "^2.0.2",
|
"@zachleat/details-utils": "^2.0.2",
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
"content",
|
"content",
|
||||||
"plugins",
|
"plugins",
|
||||||
"components",
|
"components",
|
||||||
|
"a11y-syntax-highlighting-dark",
|
||||||
"pridesymbols",
|
"pridesymbols",
|
||||||
"utility"
|
"utility"
|
||||||
] %}
|
] %}
|
||||||
|
|
|
@ -0,0 +1,188 @@
|
||||||
|
/**
|
||||||
|
* a11y-dark theme for JavaScript, CSS, and HTML
|
||||||
|
* Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
|
||||||
|
* @author ericwbailey
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
Theme
|
||||||
|
*/
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
color: #f8f8f2;
|
||||||
|
background: none;
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-moz-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks */
|
||||||
|
pre[class*="language-"] {
|
||||||
|
padding: 1em;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
overflow: auto;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre) > code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
background: #2b2b2b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline code */
|
||||||
|
:not(pre) > code[class*="language-"] {
|
||||||
|
padding: 0.1em;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: #d4d0ab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation {
|
||||||
|
color: #fefefe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.property,
|
||||||
|
.token.tag,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol,
|
||||||
|
.token.deleted {
|
||||||
|
color: #ffa07a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.boolean,
|
||||||
|
.token.number {
|
||||||
|
color: #00e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.builtin,
|
||||||
|
.token.inserted {
|
||||||
|
color: #abe338;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string,
|
||||||
|
.token.variable {
|
||||||
|
color: #00e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.function {
|
||||||
|
color: #ffd700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.keyword {
|
||||||
|
color: #00e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.regex,
|
||||||
|
.token.important {
|
||||||
|
color: #ffd700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important,
|
||||||
|
.token.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Plugin support
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Line highlight */
|
||||||
|
.line-highlight {
|
||||||
|
background: rgba(255, 217, 0, 0.10);
|
||||||
|
border-top: 1px solid rgba(255, 217, 0, 0.55);
|
||||||
|
border-bottom: 1px solid rgba(255, 217, 0, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Line numbers */
|
||||||
|
.line-numbers .line-numbers-rows {
|
||||||
|
border-right: 1px solid #F8F8F2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-numbers-rows > span:before {
|
||||||
|
color: #D4D0AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
High contrast mode support
|
||||||
|
*/
|
||||||
|
@media screen and (-ms-high-contrast: active) {
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
color: windowText;
|
||||||
|
background: window;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre) > code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
background: window;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important {
|
||||||
|
background: highlight;
|
||||||
|
color: window;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.function,
|
||||||
|
.token.keyword,
|
||||||
|
.token.operator,
|
||||||
|
.token.selector {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.attr-value,
|
||||||
|
.token.comment,
|
||||||
|
.token.doctype,
|
||||||
|
.token.function,
|
||||||
|
.token.keyword,
|
||||||
|
.token.operator,
|
||||||
|
.token.property,
|
||||||
|
.token.string {
|
||||||
|
color: highlight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.attr-value,
|
||||||
|
.token.url {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
title: Colophon
|
title: Colophon
|
||||||
keyword: colophon page
|
keyword: colophon page
|
||||||
updated: 2024-07-27
|
updated: 2024-08-02
|
||||||
toc: true
|
toc: true
|
||||||
eleventyNavigation:
|
eleventyNavigation:
|
||||||
order: 14
|
order: 14
|
||||||
|
@ -25,6 +25,7 @@ Previously, this website was hosted on [Neocities](https://neocities.org/) until
|
||||||
## Plugins
|
## Plugins
|
||||||
* Eleventy's official [RSS](https://www.11ty.dev/docs/plugins/rss/) plugin
|
* Eleventy's official [RSS](https://www.11ty.dev/docs/plugins/rss/) plugin
|
||||||
* Eleventy's official [Navigation](https://www.11ty.dev/docs/plugins/navigation/) plugin
|
* Eleventy's official [Navigation](https://www.11ty.dev/docs/plugins/navigation/) plugin
|
||||||
|
* Eleventy's official [Syntax Highlighting](https://www.11ty.dev/docs/plugins/syntaxhighlight/) plugin
|
||||||
* [@zachleat/details-utils](https://www.npmjs.com/package/@zachleat/details-utils)
|
* [@zachleat/details-utils](https://www.npmjs.com/package/@zachleat/details-utils)
|
||||||
|
|
||||||
### Eleventy Community Plugins
|
### Eleventy Community Plugins
|
||||||
|
@ -45,6 +46,7 @@ Eleventy has the Markdown parser [markdown-it](https://www.npmjs.com/package/mar
|
||||||
## Self-hosted Assets
|
## Self-hosted Assets
|
||||||
* [Lexend](https://www.lexend.com/) font family — used as the default font of this site
|
* [Lexend](https://www.lexend.com/) font family — used as the default font of this site
|
||||||
* [Intel One Mono](https://www.intel.com/content/www/us/en/company-overview/one-monospace-font.html) typeface — used as the monospaced font of this site
|
* [Intel One Mono](https://www.intel.com/content/www/us/en/company-overview/one-monospace-font.html) typeface — used as the monospaced font of this site
|
||||||
|
* Eric Bailey's [a11y-syntax-highlighting](https://github.com/ericwbailey/a11y-syntax-highlighting) CSS dark mode stylesheet for Prism.js
|
||||||
|
|
||||||
## JavaScript
|
## JavaScript
|
||||||
Due to this website being a static site, JavaScript is used to create dynamic and interactive components of this site. Here is a list of how JavaScript is used on this site:
|
Due to this website being a static site, JavaScript is used to create dynamic and interactive components of this site. Here is a list of how JavaScript is used on this site:
|
||||||
|
|
Loading…
Reference in New Issue