CHERRY PICK: markdown: improved code highlight, added support for pyt…

…hon and kotlin
blogify-dev · Nov 4, 2019 · b6d62cc · b6d62cc
1 parent 2b6df7e
commit b6d62cc
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 3 deletions.
diff --git a/src/blogify/frontend/angular.json b/src/blogify/frontend/angular.json
@@ -30,7 +30,7 @@
             "styles": [
               "./node_modules/font-awesome/scss/font-awesome.scss",
               "src/styles.scss",
-              "node_modules/prismjs/themes/prism-okaidia.css",
+              "node_modules/prismjs/themes/prism-twilight.css",
               "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css",
               "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css"
             ],
@@ -43,6 +43,8 @@
                 "node_modules/marked/lib/marked.js",
                 "node_modules/prismjs/prism.js",
                 "node_modules/prismjs/components/prism-csharp.min.js",
+                "node_modules/prismjs/components/prism-python.min.js",
+                "node_modules/prismjs/components/prism-kotlin.min.js",
                 "node_modules/prismjs/components/prism-css.min.js",
                 "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js",
                 "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js"

diff --git a/src/blogify/frontend/package.json b/src/blogify/frontend/package.json
@@ -25,6 +25,7 @@
     "angular-font-awesome": "^3.1.2",
     "font-awesome": "^4.7.0",
     "ngx-markdown": "^8.2.1",
+    "prismjs": "^1.17.1",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "uuid": "^3.3.3",

diff --git a/src/blogify/frontend/src/styles.scss b/src/blogify/frontend/src/styles.scss
@@ -6,6 +6,7 @@
 @import "styles/layouts";
 @import "styles/forms";
 @import "styles/titles";
+@import "styles/code";
 
 * {
     transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
@@ -17,7 +18,6 @@
     text-decoration: none;
     border: none;
     outline: none;
-
     font-family: $nunito;
     font-size: 10px;
 }

diff --git a/src/blogify/frontend/src/styles/code.scss b/src/blogify/frontend/src/styles/code.scss
@@ -0,0 +1,11 @@
+@import "fonts";
+
+code * { font-family: $source; }
+
+pre[class*="language-"] {
+    border:          none !important;
+    box-shadow:      none !important;
+    * { text-shadow: none !important; }
+
+    background: var(--card-bg) !important;
+}
diff --git a/src/blogify/frontend/src/styles/fonts.scss b/src/blogify/frontend/src/styles/fonts.scss
@@ -1,7 +1,8 @@
 @import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap');
 
-$lexenda: 'Lexend Deca', sans-serif;
 $nunito: 'Nunito', sans-serif;
+$source: 'Source Code Pro', sans-serif;
 
 a:hover, a:hover * {
     color: var(--accent-neutral) !important;