Syntax highlight code blocks

_posts/blog/dev-2019-08-09-ide-to.md

@@ -44,12 +44,20 @@ praemia pariter exaestuat fecerat. Haemonio quem: _in_ sibi spectans parmam,
 tetenderat filia ait quo calcitrat at vides, cui iuvenem rerum erat. Eminus
 flammas iamque.
 
-```
-var brouterVisualRecycle = netmaskExbibyteMac + download(
-        twitter_serp_yobibyte, backlinkDirectBandwidth, hot);
-ldap_markup -= 811567;
-icqKofficeCache = e(2 + bps + 5, cardComputer.addressArchitectureSystem.vdu(
-        workstation, cad_icon_impression + portalIsa, 4), cpcHashtagRing);
+```typescript
+var brouterVisualRecycle =
+  netmaskExbibyteMac +
+  download(twitter_serp_yobibyte, backlinkDirectBandwidth, hot)
+ldap_markup -= 811567
+icqKofficeCache = e(
+  2 + bps + 5,
+  cardComputer.addressArchitectureSystem.vdu(
+    workstation,
+    cad_icon_impression + portalIsa,
+    4
+  ),
+  cpcHashtagRing
+)
 ```
 
 ## Quid percussa dura auro ferentem tamen Numidasque

src/routes/blog/[slug].svelte

@@ -31,13 +31,13 @@
     background-color: #f9f9f9;
     box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
     padding: 0.5em;
-    border-radius: 2px;
+    border-radius: 4px;
     overflow-x: auto;
   }
 
   .content :global(pre) :global(code) {
     background-color: transparent;
-    padding: 0;
+    /* padding: 0; */
   }
 
   .content :global(ul) {
@@ -51,6 +51,10 @@
 
 <svelte:head>
   <title>{post.title}</title>
+  <link rel="stylesheet" href="prism.css" />
+  <script src="prism.js">
+
+  </script>
 </svelte:head>
 
 <h1>{post.title}</h1>

static/global.css

@@ -57,15 +57,6 @@ a:hover {
   text-decoration: underline;
 }
 
-code {
-  font-family: menlo, inconsolata, monospace;
-  font-size: calc(1em - 2px);
-  color: #555;
-  background-color: #f0f0f0;
-  padding: 0.2em 0.4em;
-  border-radius: 2px;
-}
-
 p {
   margin: 0;
 }

static/prism.css

@@ -0,0 +1,149 @@
+/* PrismJS 1.17.1
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+typescript&plugins=autolinker */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code,
+pre {
+  font-family: menlo, inconsolata, monospace;
+  font-size: 0.92em;
+  background-color: #f0f0f0;
+  padding: 0.2em 0.4em;
+  color: #464646;
+  text-shadow: 0 1px white;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+
+  -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-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+  code[class*='language-'],
+  pre[class*='language-'] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #f5f2f0;
+}
+
+/* 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: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, 0.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #dd4a68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token a {
+  color: inherit;
+}