Swap to use an upstream theme directly from the prismjs node_modules

.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);

_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!  #}
     {#- <meta name="generator" content="{{ eleventy.generator }}"> #}
 
-    <link rel="stylesheet" href="{{ '/css/index.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/prism-theme.css' | url }}">
-    <link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
     <link rel="stylesheet" href="{{ '/css/prism-diff.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/index.css' | url }}">
     <link rel="alternate" href="{{ '/feed/feed.xml' | url }}" type="application/atom+xml" title="{{ metadata.title }}">
     <link rel="alternate" href="{{ '/feed/feed.json' | url }}" type="application/json" title="{{ metadata.title }}">
 

en/blog/firstpost.md

@@ -18,7 +18,8 @@ Capitalize on low hanging fruit to identify a ballpark value added activity to b
  // this is a command
  function myCommand() {
 +  let counter = 0;
-+	counter++;
+-  let counter = 1;
+   counter++;
  }
 
  // Test with a line break above this line.

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;
+	let counter = 0;
-
+	counter++;
--	counter++;
-
 }
 
 // Test with a line break above this line.

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;
+	let counter = 0;
-
+	counter++;
--	counter++;
-
 }
 
 // Test with a line break above this line.

public/css/index.css

@@ -92,25 +92,23 @@ table th {
 pre,
 code {
   font-family: var(--font-family-monospace);
-  line-height: 1.5;
 }
-pre {
+pre,
-  font-size: 14px;
+pre[class*="language-"] {
-  line-height: 1.375;
+  padding: 1em;
-  direction: ltr;
+  margin: .5em 0;
-  text-align: left;
+  line-height: 1.375; /* 22px /16 */
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
   -moz-tab-size: 2;
   -o-tab-size: 2;
   tab-size: 2;
   -webkit-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
-  padding: 1em;
+  direction: ltr;
-  margin: .5em 0;
+  text-align: left;
-  background-color: #f6f6f6;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
 }
 code {
   word-break: break-all;

public/css/prism-base16-monokai.dark.css

@@ -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;
-}

public/css/prism-diff.css

@@ -9,9 +9,11 @@ pre[class*="language-diff-"] {
 }
 .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 */
@@ -23,9 +25,12 @@ pre[class*="language-diff-"] {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-  width: var(--eleventy-code-padding);
 	padding-top: 2px;
 	padding-bottom: 2px;
+}
+.token.prefix.inserted,
+.token.prefix.deleted {
+	width: var(--eleventy-code-padding);
 	background-color: rgba(0,0,0,.2);
 }