From abb712dbb6331c66de6059fe898beaa026d206be Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Mon, 15 Aug 2022 12:22:19 -0500 Subject: [PATCH] Swap to use an upstream theme directly from the prismjs node_modules --- .eleventy.js | 6 +- _includes/layouts/base.njk | 4 +- en/blog/firstpost.md | 15 ++-- en/blog/thirdpost.md | 8 +-- es/blog/thirdpost.md | 8 +-- public/css/index.css | 22 +++--- public/css/prism-base16-monokai.dark.css | 88 ------------------------ public/css/prism-diff.css | 21 +++--- 8 files changed, 44 insertions(+), 128 deletions(-) delete mode 100644 public/css/prism-base16-monokai.dark.css diff --git a/.eleventy.js b/.eleventy.js index 87300af..cdc46ae 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -5,6 +5,7 @@ const pluginRss = require("@11ty/eleventy-plugin-rss"); const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const pluginNavigation = require("@11ty/eleventy-navigation"); const { EleventyI18nPlugin } = require("@11ty/eleventy"); + const languageStrings = require("./i18n.js"); module.exports = function(eleventyConfig) { @@ -12,7 +13,10 @@ module.exports = function(eleventyConfig) { // Copy the contents of the `public` folder to the output folder // For example, `./public/css/` ends up in `_site/css/` - eleventyConfig.addPassthroughCopy({"./public/": "/"}); + eleventyConfig.addPassthroughCopy({ + "./public/": "/", + "./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-theme.css", + }); // Add plugins eleventyConfig.addPlugin(pluginRss); diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index c64ca83..2cee290 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -9,9 +9,9 @@ {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site! #} {#- #} - - + + diff --git a/en/blog/firstpost.md b/en/blog/firstpost.md index 88ee86a..111e21b 100644 --- a/en/blog/firstpost.md +++ b/en/blog/firstpost.md @@ -15,12 +15,13 @@ Bring to the table win-win survival strategies to ensure proactive domination. A Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. ```diff-js -// this is a command -function myCommand() { -+ let counter = 0; -+ counter++; -} + // this is a command + function myCommand() { ++ let counter = 0; +- let counter = 1; + counter++; + } -// Test with a line break above this line. -console.log('Test'); + // Test with a line break above this line. + console.log('Test'); ``` diff --git a/en/blog/thirdpost.md b/en/blog/thirdpost.md index 5fda350..b45e303 100644 --- a/en/blog/thirdpost.md +++ b/en/blog/thirdpost.md @@ -9,13 +9,11 @@ layout: layouts/post.njk --- Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. -```diff-js +```js // this is a command function myCommand() { -+ let counter = 0; - -- counter++; - + let counter = 0; + counter++; } // Test with a line break above this line. diff --git a/es/blog/thirdpost.md b/es/blog/thirdpost.md index 92ba676..23690e2 100644 --- a/es/blog/thirdpost.md +++ b/es/blog/thirdpost.md @@ -5,13 +5,11 @@ layout: layouts/post.njk --- Aproveche los marcos ágiles para proporcionar una sinopsis sólida para descripciones generales de alto nivel. Los enfoques iterativos de la estrategia corporativa fomentan el pensamiento colaborativo para promover la propuesta de valor general. Hacer crecer orgánicamente la visión holística del mundo de la innovación disruptiva a través de la diversidad y el empoderamiento en el lugar de trabajo. -```diff-js +```js // this is a command function myCommand() { -+ let counter = 0; - -- counter++; - + let counter = 0; + counter++; } // Test with a line break above this line. diff --git a/public/css/index.css b/public/css/index.css index f83cadf..88520d2 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -92,25 +92,23 @@ table th { pre, code { font-family: var(--font-family-monospace); - line-height: 1.5; } -pre { - font-size: 14px; - line-height: 1.375; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; +pre, +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + line-height: 1.375; /* 22px /16 */ -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; - padding: 1em; - margin: .5em 0; - background-color: #f6f6f6; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; } code { word-break: break-all; diff --git a/public/css/prism-base16-monokai.dark.css b/public/css/prism-base16-monokai.dark.css deleted file mode 100644 index 4a7889a..0000000 --- a/public/css/prism-base16-monokai.dark.css +++ /dev/null @@ -1,88 +0,0 @@ -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: 2; - -o-tab-size: 2; - tab-size: 2; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - background: #272822; - color: #f8f8f2; -} -pre[class*="language-"] { - padding: 1.5em 0; - margin: .5em 0; - overflow: auto; -} -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; -} -.token.comment, .token.prolog, .token.doctype, .token.cdata { - color: #75715e; -} -.token.punctuation { - color: #f8f8f2; -} -.token.namespace { - opacity: .7; -} -.token.operator, .token.boolean, .token.number { - color: #fd971f; -} -.token.property { - color: #f4bf75; -} -.token.tag { - color: #66d9ef; -} -.token.string { - color: #a1efe4; -} -.token.selector { - color: #ae81ff; -} -.token.attr-name { - color: #fd971f; -} -.token.entity, .token.url, .language-css .token.string, .style .token.string { - color: #a1efe4; -} -.token.attr-value, .token.keyword, .token.control, .token.directive, .token.unit { - color: #a6e22e; -} -.token.statement, .token.regex, .token.atrule { - color: #a1efe4; -} -.token.placeholder, .token.variable { - color: #66d9ef; -} -.token.deleted { - text-decoration: line-through; -} -.token.inserted { - text-decoration: none; -} -.token.italic { - font-style: italic; -} -.token.important, .token.bold { - font-weight: bold; -} -.token.important { - color: #f92672; -} -.token.entity { - cursor: help; -} -pre > code.highlight { - outline: 0.4em solid #f92672; - outline-offset: .4em; -} diff --git a/public/css/prism-diff.css b/public/css/prism-diff.css index 797b0e5..9f7e676 100644 --- a/public/css/prism-diff.css +++ b/public/css/prism-diff.css @@ -3,15 +3,17 @@ */ pre[class*="language-diff-"] { - --eleventy-code-padding: 1.25em; + --eleventy-code-padding: 1.25em; padding-left: var(--eleventy-code-padding); padding-right: var(--eleventy-code-padding); } .token.deleted { background-color: hsl(0, 51%, 37%); + color: inherit; } .token.inserted { background-color: hsl(126, 31%, 39%); + color: inherit; } /* Make the + and - characters unselectable for copy/paste */ @@ -20,13 +22,16 @@ pre[class*="language-diff-"] { .token.prefix.deleted { -webkit-user-select: none; user-select: none; - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--eleventy-code-padding); - padding-top: 2px; - padding-bottom: 2px; - background-color: rgba(0,0,0,.2); + display: inline-flex; + align-items: center; + justify-content: center; + padding-top: 2px; + padding-bottom: 2px; +} +.token.prefix.inserted, +.token.prefix.deleted { + width: var(--eleventy-code-padding); + background-color: rgba(0,0,0,.2); } /* Optional: full-width background color */