Merge pull request #111 from freedomofpress/better-code-blocks

Have better code blocks and spacing

Author: almet

eleventy.config.js

@@ -1,18 +1,25 @@
 import pluginRss from "@11ty/eleventy-plugin-rss";
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+import markdownPrismJs from "@11ty/eleventy-plugin-syntaxhighlight/src/markdownSyntaxHighlightOptions.js";
 import { gte } from "semver";
 import markdownIt from "markdown-it";
 
 export default function (eleventyConfig) {
+  const markdown = markdownIt({
+    html: true,
+    highlight: markdownPrismJs({ lineSeparator: "\n" }),
+  });
   eleventyConfig.addPassthroughCopy("src/assets");
   eleventyConfig.addPassthroughCopy("src/favicon.ico");
   eleventyConfig.addPlugin(pluginRss);
+  eleventyConfig.addPlugin(syntaxHighlight);
 
   eleventyConfig.setFrontMatterParsingOptions({
     excerpt: true,
   });
 
   eleventyConfig.addFilter("md", function (content = "") {
-    return markdownIt({ html: true }).render(content);
+    return markdown.render(content);
   });
 
   eleventyConfig.addFilter("dateIso", (date) => {

package-lock.json

@@ -11,7 +11,8 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@11ty/eleventy": "^3.0.0"
+    "@11ty/eleventy": "^3.0.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2"
   },
   "dependencies": {
     "@11ty/eleventy-plugin-rss": "^1.0.5",

package.json

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="/assets/css/reset.css">
   <link rel="stylesheet" href="/assets/css/style.css">
+  <link rel="stylesheet" href="/assets/css/prism.css">
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
   <meta name="description"
     content="Take potentially dangerous PDFs, office documents, or images and convert them to a safe PDF.">
@@ -53,7 +54,7 @@
   </nav>
 </header>
   <main>
-  {{ content | safe | indent(4)}}
+  {{ content | safe }}
   </main>
   <footer>
     <div class="wrapper" id="features">

src/_layouts/base.njk

@@ -0,0 +1,110 @@
+/* Prism syntax highlighting (okaidia theme) */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #f8f8f2;
+  background: none;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  tab-size: 4;
+  hyphens: none;
+}
+
+pre[class*="language-"] {
+  padding: 1rem;
+  margin: 2em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+  background: #000;
+}
+
+:not(pre) > code[class*="language-"] {
+  background: #272822;
+}
+
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #8292a2;
+}
+
+.token.punctuation {
+  color: #f8f8f2;
+}
+
+.token.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #f92672;
+}
+
+.token.boolean,
+.token.number {
+  color: #ae81ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #a6e22e;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+  color: #e6db74;
+}
+
+.token.keyword {
+  color: #66d9ef;
+}
+
+.token.regex,
+.token.important {
+  color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/css/prism.css

@@ -52,14 +52,14 @@ body {
 }
 
 h1 {
-  font-size: 2.8rem;
+  font-size: 3rem;
   line-height: 5.25rem;
   margin-bottom: 1rem;
 }
 
 h2, h3 {
-  margin-bottom: 1.5rem;
-  margin-top: 1.5rem;
+  margin-bottom: 3rem;
+  margin-top: 3rem;
 }
 
 h2 {
@@ -548,23 +548,27 @@ code {
   background-color: #f3f5f7;
   color: #333;
   border-radius: 0.25rem;
-  padding: 0.375rem;
+  padding: 0.2rem;
 }
 
 pre {
   display: block;
   padding: 1rem;
   overflow-x: auto;
-  background-color: #f3f5f7;
+  background-color: #000;
+  margin-bottom: 2em;
+  margin-top: 2em;
 }
 
 pre code {
   font-size: 1em;
   display: block;
   padding: 0;
   background: none;
+  color: #fff;
 }
 
+
 figure img.mid {
   width: 50%;
 }
@@ -596,4 +600,4 @@ video {
   width: 100%;
   height: auto;
   display: block;
-}
+}