Merge pull request #11 from swift502/code-block

styling

package.json

@@ -11,11 +11,12 @@
     "@astrojs/sitemap": "^3.0.5",
     "@fontsource/catamaran": "^5.0.18",
     "@fontsource/solway": "^5.0.8",
+    "@fontsource/sono": "^5.0.18",
     "@rollup/plugin-yaml": "^4.1.2",
     "astro": "^4.4.0",
+    "highlight.js": "^11.9.0",
     "image-size": "^1.1.1",
     "marked": "^12.0.0",
-    "normalize.css": "^8.0.1",
-    "shiki": "^1.1.6"
+    "normalize.css": "^8.0.1"
   }
 }

src/content_blocks/Code.astro

@@ -1,15 +1,15 @@
 ---
-import { codeToHtml } from 'shiki'
+import hljs from 'highlight.js';
+import 'highlight.js/styles/kimbie-light.min.css';
 
 import ContentBlock from '../components/content_block/ContentBlock.astro';
 import ContentDescription from "../components/content_block/ContentDescription.astro";
 
 const { project, contentBlock } = Astro.props;
 
-const code = await codeToHtml(contentBlock.properties.data, {
-  lang: 'javascript',
-  theme: 'material-theme-lighter'
-})
+const code = hljs.highlightAuto(
+    contentBlock.properties.data
+).value
 
 const contentBlockId = "code-block-" + contentBlock.index;
 const borderClass = 'desc' in contentBlock.properties ? ' border-radius-top' : ' border-radius-full';
@@ -19,15 +19,13 @@ const borderClass = 'desc' in contentBlock.properties ? ' border-radius-top' : '
 <ContentBlock>
     <div
         id={contentBlockId}
-        class={"code-window" + borderClass}
-        data-code={contentBlock.properties.data}
-        set:html={code}>
-        <div class="code-file border-radius-full">
-            <a href={contentBlock.properties.link} target="_blank">
-                {contentBlock.properties.file}
-                <img class="code-file-icon" src="/assets/svg/external-link-code.svg" alt="" onload="fadeIn(this);"/>
-            </a>
-        </div>
+        class={"code-window hljs" + borderClass}
+        data-code={contentBlock.properties.data}>
+        <a class="code-file border-radius-full" href={contentBlock.properties.link} target="_blank">
+            {contentBlock.properties.file}
+            <img class="code-file-icon" src="/assets/svg/external-link-code.svg" alt="" onload="fadeIn(this);"/>
+        </a>
+        <pre><code set:html={code}></code></pre>
     </div>
     <ContentDescription contentBlock={contentBlock} parentId={contentBlockId} />
 </ContentBlock>
@@ -36,23 +34,24 @@ const borderClass = 'desc' in contentBlock.properties ? ' border-radius-top' : '
     .code-window {
         position: relative;
         width: 100%;
+        background: #FAFAFA;
     }
 
     .code-file {
+        font-family: 'Sono', sans-serif;
         position: absolute;
+        display: block;
         top: 0px;
         right: 0px;
-        background: #FAFAFAAA;
-        padding: 14px 20px;
-    }
-
-    .code-file a {
+        background: #F0F0F0;
+        padding: 10px 18px;
         font-size: 16px;
-        color: #90A4AE;
+        color: #84613D;
         font-weight: normal;
+        letter-spacing: -1px;
     }
 
-    .code-file a:hover {
+    .code-file:hover {
         text-decoration: underline;
     }
 
@@ -63,10 +62,8 @@ const borderClass = 'desc' in contentBlock.properties ? ' border-radius-top' : '
 
     @media (max-width: 776px) {
 		.code-file {
-            padding: 14px 20px 0px;
 			position: relative;
             background: ##FAFAFA;
-            /* text-align: left; */
             width: 100%;
             box-sizing: border-box;
 		}
@@ -82,8 +79,8 @@ const borderClass = 'desc' in contentBlock.properties ? ' border-radius-top' : '
         overflow: auto;
     }
 
-    code span {
+    code, span {
         font-size: 16px;
-        font-family: monospace;
+        font-family: 'Sono', sans-serif;
     }
 </style>

src/layouts/Default.astro

@@ -8,6 +8,7 @@ import '@fontsource/catamaran/900.css';
 import '@fontsource/solway/400.css';
 import '@fontsource/solway/500.css';
 import '@fontsource/solway/700.css';
+import '@fontsource/sono';
 
 import 'normalize.css';
 import '../styles/global.css';

src/styles/global.css

@@ -57,8 +57,4 @@ hr {
 	body {
 		min-width: 260px;
 	}
-
-	* {
-		font-size: 18px;
-	}
 }