feat: add code highlighting

devich · Apr 17, 2024 · 7e08d58 · 7e08d58
1 parent c96a4b3
commit 7e08d58
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -6,16 +6,18 @@ This Jekyll theme simply converts your README.md to the GitHub Pages site with [
 ## Quick Start
 
 **1.** Create `_config.yml` file in the root of your repository with the following contents:
-```
+```yaml
 remote_theme: devich/readme-landing-page
 ```
 
 **2.** Create `index.md` file in the root of your repository with the following contents:
-<pre><code>---
-layout: index
----
-&#123;% include_relative README.md %&#125;
-</code></pre>
+
+<div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
+<span class="na">layout</span><span class="pi">:</span> <span class="s">index</span>
+<span class="nn">---</span>
+
+<span class="nt">&#123;%</span> <span class="na">include_relative</span> <span class="s">README.md</span> <span class="nt">%&#125;</span>
+</code></pre></div>
 
 **3.** Enable GitHub Pages in the repository settings.
 
@@ -40,13 +42,13 @@ The following options are available:
 If you need a block in the README.md that should not be shown on the GitHub Pages site, you can format this block in HTML and assign `class="ignore"` to this block.
 
 <p class="ignore">
-    This paragraph <a>will not be displayed</a> on the site
-    because it has an <code>"ignore"</code> class:
+    This paragraph <a href="https://devich.github.io/readme-landing-page/">will not be displayed</a>
+    on the site because it has an <code>"ignore"</code> class.
 </p>
 
 ```html
 <p class="ignore">
-    This paragraph will not be displayed on the site
-    because it has an <code>"ignore"</code> class:
+    This paragraph <a href="https://devich.github.io/readme-landing-page/">will not be
+    displayed</a> on the site because it has an <code>"ignore"</code> class.
 </p>
 ```
diff --git a/_layouts/index.html b/_layouts/index.html
@@ -50,32 +50,9 @@
       {% endif %}
     />
     <!-- Custom styles -->
-    <style>
-      h1 {
-        font-size: 4rem;
-        font-family: "Roboto Slab", var(--pico-font-family);
-        font-optical-sizing: auto;
-        font-weight: 800;
-        font-style: normal;
-        /* hyphens: auto; */
-      }
-      pre {
-        margin-top: calc(var(--pico-spacing) / 2);
-      }
-      .ignore {
-        display: none;
-      }
-      @media screen and (max-width: 575px) {
-        h1 {
-          font-size: 2.5rem;
-        }
-      }
-      @media screen and (max-width: 360px) {
-        h1 {
-          font-size: 2rem;
-        }
-      }
-    </style>
+    <link rel="stylesheet" href="css/styles.css">
+    <!-- Code highlight styles -->
+    <link rel="stylesheet" href="css/base16.solarized.css" />
   </head>
 
   <body>

diff --git a/css/base16.solarized.css b/css/base16.solarized.css
@@ -0,0 +1,77 @@
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+  color: #586e75;
+}
+.highlight .err {
+  color: #002b36;
+  background-color: #dc322f;
+}
+.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {
+  color: #657b83;
+}
+.highlight .cp {
+  color: #b58900;
+}
+.highlight .nt {
+  color: #b58900;
+}
+.highlight .o, .highlight .ow {
+  color: #93a1a1;
+}
+.highlight .p, .highlight .pi {
+  color: #93a1a1;
+}
+.highlight .gi {
+  color: #859900;
+}
+.highlight .gd {
+  color: #dc322f;
+}
+.highlight .gh {
+  color: #268bd2;
+  background-color: #002b36;
+  font-weight: bold;
+}
+.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
+  color: #6c71c4;
+}
+.highlight .kc {
+  color: #cb4b16;
+}
+.highlight .kt {
+  color: #cb4b16;
+}
+.highlight .kd {
+  color: #cb4b16;
+}
+.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
+  color: #859900;
+}
+.highlight .sr {
+  color: #2aa198;
+}
+.highlight .si {
+  color: #d33682;
+}
+.highlight .se {
+  color: #d33682;
+}
+.highlight .nn {
+  color: #b58900;
+}
+.highlight .nc {
+  color: #b58900;
+}
+.highlight .no {
+  color: #b58900;
+}
+.highlight .na {
+  color: #268bd2;
+}
+.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx {
+  color: #859900;
+}
+.highlight .ss {
+  color: #859900;
+}
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,24 @@
+h1 {
+  font-size: 4rem;
+  font-family: "Roboto Slab", var(--pico-font-family);
+  font-optical-sizing: auto;
+  font-weight: 800;
+  font-style: normal;
+  /* hyphens: auto; */
+}
+pre {
+  margin-top: calc(var(--pico-spacing) / 2);
+}
+.ignore {
+  display: none;
+}
+@media screen and (max-width: 575px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+@media screen and (max-width: 360px) {
+  h1 {
+    font-size: 2rem;
+  }
+}