added code block support to blog

EthanThatOneKid · Jun 6, 2022 · 8d33a53 · 8d33a53
1 parent b7e9e3b
commit 8d33a53
Show file tree

Hide file tree

Showing 2 changed files with 285 additions and 0 deletions.
diff --git a/src/lib/blog/syntax-highlight.css b/src/lib/blog/syntax-highlight.css
@@ -0,0 +1,271 @@
+/* Copied and modified from https://github.com/primer/github-syntax-light/blob/master/lib/github-light.css */
+
+/*!
+ * GitHub Light v0.5.0
+ * Copyright (c) 2012 - 2017 GitHub, Inc.
+ * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
+ */
+
+.light {
+  --color-prettylights-syntax-comment: #6a737d;
+  --color-prettylights-syntax-constant: #005cc5;
+  --color-prettylights-syntax-entity: #6f42c1;
+  --color-prettylights-syntax-storage-modifier-import: #24292e;
+  --color-prettylights-syntax-entity-tag: #22863a;
+  --color-prettylights-syntax-keyword: #d73a49;
+  --color-prettylights-syntax-string: #032f62;
+  --color-prettylights-syntax-variable: #e36209;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #b31d28;
+  --color-prettylights-syntax-invalid-illegal-text: #fafbfc;
+  --color-prettylights-syntax-invalid-illegal-bg: #b31d28;
+  --color-prettylights-syntax-carriage-return-text: #fafbfc;
+  --color-prettylights-syntax-carriage-return-bg: #d73a49;
+  --color-prettylights-syntax-string-regexp: #22863a;
+  --color-prettylights-syntax-markup-list: #735c0f;
+  --color-prettylights-syntax-markup-heading: #005cc5;
+  --color-prettylights-syntax-markup-italic: #24292e;
+  --color-prettylights-syntax-markup-bold: #24292e;
+  --color-prettylights-syntax-markup-deleted-text: #b31d28;
+  --color-prettylights-syntax-markup-deleted-bg: #ffeef0;
+  --color-prettylights-syntax-markup-inserted-text: #22863a;
+  --color-prettylights-syntax-markup-inserted-bg: #f0fff4;
+  --color-prettylights-syntax-markup-changed-text: #e36209;
+  --color-prettylights-syntax-markup-changed-bg: #ffebda;
+  --color-prettylights-syntax-markup-ignored-text: #f6f8fa;
+  --color-prettylights-syntax-markup-ignored-bg: #005cc5;
+  --color-prettylights-syntax-meta-diff-range: #6f42c1;
+  --color-prettylights-syntax-brackethighlighter-angle: #586069;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #959da5;
+  --color-prettylights-syntax-constant-other-reference-link: #032f62;
+  --color-canvas-subtle: #f6f8fa;
+}
+
+.dark {
+  --color-prettylights-syntax-comment: #8b949e;
+  --color-prettylights-syntax-constant: #79c0ff;
+  --color-prettylights-syntax-entity: #d2a8ff;
+  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
+  --color-prettylights-syntax-entity-tag: #7ee787;
+  --color-prettylights-syntax-keyword: #ff7b72;
+  --color-prettylights-syntax-string: #a5d6ff;
+  --color-prettylights-syntax-variable: #ffa657;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+  --color-prettylights-syntax-carriage-return-bg: #b62324;
+  --color-prettylights-syntax-string-regexp: #7ee787;
+  --color-prettylights-syntax-markup-list: #f2cc60;
+  --color-prettylights-syntax-markup-heading: #1f6feb;
+  --color-prettylights-syntax-markup-italic: #c9d1d9;
+  --color-prettylights-syntax-markup-bold: #c9d1d9;
+  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+  --color-prettylights-syntax-markup-deleted-bg: #67060c;
+  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+  --color-prettylights-syntax-markup-inserted-bg: #033a16;
+  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
+  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+  --color-canvas-subtle: #161b22;
+}
+
+@media (prefers-color-scheme: light) {
+  body:not(.dark) {
+    --color-prettylights-syntax-comment: #6a737d;
+    --color-prettylights-syntax-constant: #005cc5;
+    --color-prettylights-syntax-entity: #6f42c1;
+    --color-prettylights-syntax-storage-modifier-import: #24292e;
+    --color-prettylights-syntax-entity-tag: #22863a;
+    --color-prettylights-syntax-keyword: #d73a49;
+    --color-prettylights-syntax-string: #032f62;
+    --color-prettylights-syntax-variable: #e36209;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #b31d28;
+    --color-prettylights-syntax-invalid-illegal-text: #fafbfc;
+    --color-prettylights-syntax-invalid-illegal-bg: #b31d28;
+    --color-prettylights-syntax-carriage-return-text: #fafbfc;
+    --color-prettylights-syntax-carriage-return-bg: #d73a49;
+    --color-prettylights-syntax-string-regexp: #22863a;
+    --color-prettylights-syntax-markup-list: #735c0f;
+    --color-prettylights-syntax-markup-heading: #005cc5;
+    --color-prettylights-syntax-markup-italic: #24292e;
+    --color-prettylights-syntax-markup-bold: #24292e;
+    --color-prettylights-syntax-markup-deleted-text: #b31d28;
+    --color-prettylights-syntax-markup-deleted-bg: #ffeef0;
+    --color-prettylights-syntax-markup-inserted-text: #22863a;
+    --color-prettylights-syntax-markup-inserted-bg: #f0fff4;
+    --color-prettylights-syntax-markup-changed-text: #e36209;
+    --color-prettylights-syntax-markup-changed-bg: #ffebda;
+    --color-prettylights-syntax-markup-ignored-text: #f6f8fa;
+    --color-prettylights-syntax-markup-ignored-bg: #005cc5;
+    --color-prettylights-syntax-meta-diff-range: #6f42c1;
+    --color-prettylights-syntax-brackethighlighter-angle: #586069;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #959da5;
+    --color-prettylights-syntax-constant-other-reference-link: #032f62;
+    --color-canvas-subtle: #eef1f3;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body:not(.light) {
+    --color-prettylights-syntax-comment: #8b949e;
+    --color-prettylights-syntax-constant: #79c0ff;
+    --color-prettylights-syntax-entity: #d2a8ff;
+    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
+    --color-prettylights-syntax-entity-tag: #7ee787;
+    --color-prettylights-syntax-keyword: #ff7b72;
+    --color-prettylights-syntax-string: #a5d6ff;
+    --color-prettylights-syntax-variable: #ffa657;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+    --color-prettylights-syntax-carriage-return-bg: #b62324;
+    --color-prettylights-syntax-string-regexp: #7ee787;
+    --color-prettylights-syntax-markup-list: #f2cc60;
+    --color-prettylights-syntax-markup-heading: #1f6feb;
+    --color-prettylights-syntax-markup-italic: #c9d1d9;
+    --color-prettylights-syntax-markup-bold: #c9d1d9;
+    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+    --color-prettylights-syntax-markup-deleted-bg: #67060c;
+    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+    --color-prettylights-syntax-markup-inserted-bg: #033a16;
+    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
+    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+    --color-canvas-subtle: #161b22;
+  }
+}
+
+.pl-c /* comment, punctuation.definition.comment, string.comment */ {
+  color: var(--color-prettylights-syntax-comment);
+}
+
+.pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
+.pl-s .pl-v /* string variable */ {
+  color: var(--color-prettylights-syntax-constant);
+}
+
+.pl-e /* entity */,
+.pl-en /* entity.name */ {
+  color: var(--color-prettylights-syntax-entity);
+}
+
+.pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
+.pl-s .pl-s1 /* string source */ {
+  color: var(--color-prettylights-syntax-storage-modifier-import);
+}
+
+.pl-ent /* entity.name.tag, markup.quote */ {
+  color: var(--color-prettylights-syntax-entity-tag);
+}
+
+.pl-k /* keyword, storage, storage.type */ {
+  color: var(--color-prettylights-syntax-keyword);
+}
+
+.pl-s /* string */,
+.pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
+.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
+.pl-sr /* string.regexp */,
+.pl-sr .pl-cce /* string.regexp constant.character.escape */,
+.pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
+.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
+  color: var(--color-prettylights-syntax-string);
+}
+
+.pl-v /* variable */,
+.pl-smw /* sublimelinter.mark.warning */ {
+  color: var(--color-prettylights-syntax-variable);
+}
+
+.pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
+  color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
+}
+
+.pl-ii /* invalid.illegal */ {
+  color: var(--color-prettylights-syntax-invalid-illegal-text);
+  background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
+}
+
+.pl-c2 /* carriage-return */ {
+  color: var(--color-prettylights-syntax-carriage-return-text);
+  background-color: var(--color-prettylights-syntax-carriage-return-bg);
+}
+
+.pl-c2::before /* carriage-return */ {
+  content: '^M';
+}
+
+.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
+  font-weight: bold;
+  color: var(--color-prettylights-syntax-string-regexp);
+}
+
+.pl-ml /* markup.list */ {
+  color: var(--color-prettylights-syntax-markup-list);
+}
+
+.pl-mh /* markup.heading */,
+.pl-mh .pl-en /* markup.heading entity.name */,
+.pl-ms /* meta.separator */ {
+  font-weight: bold;
+  color: var(--color-prettylights-syntax-markup-heading);
+}
+
+.pl-mi /* markup.italic */ {
+  font-style: italic;
+  color: var(--color-prettylights-syntax-markup-italic);
+}
+
+.pl-mb /* markup.bold */ {
+  font-weight: bold;
+  color: var(--color-prettylights-syntax-markup-bold);
+}
+
+.pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
+  color: var(--color-prettylights-syntax-markup-deleted-text);
+  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
+}
+
+.pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
+  color: var(--color-prettylights-syntax-markup-inserted-text);
+  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+}
+
+.pl-mc /* markup.changed, punctuation.definition.changed */ {
+  color: var(--color-prettylights-syntax-markup-changed-text);
+  background-color: var(--color-prettylights-syntax-markup-changed-bg);
+}
+
+.pl-mi2 /* markup.ignored, markup.untracked */ {
+  color: var(--color-prettylights-syntax-markup-ignored-text);
+  background-color: var(--color-prettylights-syntax-markup-ignored-bg);
+}
+
+.pl-mdr /* meta.diff.range */ {
+  font-weight: bold;
+  color: var(--color-prettylights-syntax-meta-diff-range);
+}
+
+.pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
+  color: var(--color-prettylights-syntax-brackethighlighter-angle);
+}
+
+.pl-sg /* sublimelinter.gutter-mark */ {
+  color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+}
+
+.pl-corl /* constant.other.reference.link, string.other.link */ {
+  text-decoration: underline;
+  color: var(--color-prettylights-syntax-constant-other-reference-link);
+}
diff --git a/src/routes/blog/[id].svelte b/src/routes/blog/[id].svelte
@@ -69,6 +69,7 @@
 </section>
 
 <style lang="scss">
+  @import '$lib/blog/syntax-highlight.css';
   section {
     display: flex;
     flex-direction: column;
@@ -104,6 +105,19 @@
       :global(p) {
         margin-bottom: 16px;
       }
+      :global(code),
+      :global(pre) {
+        font-family: monospace;
+        font-size: 1.5em;
+        background-color: var(--acm-canvas);
+        border-radius: 0.7em;
+      }
+      :global(pre) {
+        padding: 16px;
+      }
+      :global(code) {
+        padding: 0.2em 0.5em;
+      }
     }
   }
   img {