Improve Instructions and Add Highlighting

ML4NS · Dec 14, 2023 · bf73533 · bf73533
1 parent a441d43
commit bf73533
Show file tree

Hide file tree

Showing 5 changed files with 635 additions and 22 deletions.
diff --git a/css/bootstrap.css b/css/bootstrap.css
@@ -843,22 +843,22 @@ samp {
 }
 
 code {
-  padding: 2px 4px;
-  color: #c7254e;
-  white-space: nowrap;
-  background-color: #f9f2f4;
+  color: var(--main-text-color);
+  background-color: var(--table-tile-colour);
   border-radius: 4px;
+  font-family: monospace;
+  margin: 0 0;
+  padding: 0.1em 0.3em;
 }
 
 pre {
   display: block;
-  padding: 9.5px;
-  margin: 0 0 10px;
   color: var(--main-text-color);
-  word-break: break-all;
-  word-wrap: break-word;
-  background-color: #f5f5f5;
+  word-wrap: normal;
+  background-color: var(--table-tile-colour);
   border-radius: 4px;
+  width: fit-content;
+  white-space: normal;
 }
 
 pre code {
@@ -868,6 +868,7 @@ pre code {
   white-space: wrap;
   background-color: transparent;
   border-radius: 0;
+  white-space-collapse: collapse;
 }
 
 .pre-scrollable {

diff --git a/css/github-light-dark.css b/css/github-light-dark.css
@@ -0,0 +1,232 @@
+pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em 1em;
+    border-radius: 4px;
+}
+
+code.hljs {
+    padding: 3px 5px;
+}
+
+/*!
+        Theme: GitHub
+        Description: Light theme as seen on github.com
+        Author: github.com
+        Maintainer: @Hirse
+        Updated: 2021-05-15
+      
+        Outdated base version: https://github.com/primer/github-syntax-light
+        Current colors taken from GitHub's CSS
+      */
+.hljs {
+    color: #24292e;
+    background: #ffffff
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #d73a49
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #6f42c1
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #005cc5
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #032f62
+}
+
+.hljs-built_in,
+.hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #a04305
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #6a737d
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #22863a
+}
+
+.hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #24292e
+}
+
+.hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #005cc5;
+    font-weight: bold
+}
+
+.hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #735c0f
+}
+
+.hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #24292e;
+    font-style: italic
+}
+
+.hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #24292e;
+    font-weight: bold
+}
+
+.hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #22863a;
+    background-color: #f0fff4
+}
+
+.hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #b31d28;
+    background-color: #ffeef0
+}
+
+[data-theme="dark"] .hljs {
+    color: #ffffff;
+    background: #0d1117
+}
+
+[data-theme="dark"] .hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #ff7b72
+}
+
+[data-theme="dark"] .hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #d2a8ff
+}
+
+[data-theme="dark"] .hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #79c0ff
+}
+
+[data-theme="dark"] .hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #a5d6ff
+}
+
+[data-theme="dark"] .hljs-built_in,
+.hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #ffa657
+}
+
+[data-theme="dark"] .hljs-comment,
+.hljs-code,
+.hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #8b949e
+}
+
+[data-theme="dark"] .hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #7ee787
+}
+
+[data-theme="dark"] .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #c9d1d9
+}
+
+[data-theme="dark"] .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #1f6feb;
+    font-weight: bold
+}
+
+[data-theme="dark"] .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #f2cc60
+}
+
+[data-theme="dark"] .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #c9d1d9;
+    font-style: italic
+}
+
+[data-theme="dark"] .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #c9d1d9;
+    font-weight: bold
+}
+
+[data-theme="dark"] .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #aff5b4;
+    background-color: #033a16
+}
+
+[data-theme="dark"] .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #ffdcd7;
+    background-color: #67060c
+}
diff --git a/css/one-page-wonder.css b/css/one-page-wonder.css
@@ -136,12 +136,6 @@ p {
 }
 
 
-.lang-shell {
-	font-family: monospace;
-	margin: 0 0;
-	padding: 0 0;
-}
-
 .github-icon-container {
 	word-wrap: nowrap;
 	display: inline-block;

diff --git a/index.html b/index.html
@@ -755,38 +755,48 @@ <h3 class="featurette-heading">Setting Up Your Conda Environment</h3>
           </li>
           <li>On Windows open Anaconda Prompt and on Mac/Linux open Terminal.</li>
           <li>To create an environment for the course, run:
-            <pre><code class="lang-shell">conda create -n ml4ns python=<span class="hljs-number">3.11.5</span>
+            <pre><code class="language-shell">conda create -n ml4ns python=3.11.5
         </code></pre>
           </li>
           <li>Download the GitHub repo and place the <code>requirements.txt</code> file in your root directory.</li>
           <li>Activate your environment:
-            <pre><code class="lang-shell">conda <span class="hljs-built_in">activate</span> ml4ns
+            <pre><code class="language-shell">conda activate ml4ns
         </code></pre>
           </li>
           <li>Install the requirements:
-            <pre><code class="lang-shell">pip <span class="hljs-keyword">install</span> -r requirements.txt
+            <pre><code class="language-shell">pip install -r requirements.txt
         </code></pre>
           </li>
           <li>If you're on Mac or Windows (without a GPU), you can install Pytorch using the below. If you have a
             GPU, you can install Pytorch using the command on the <a href="https://pytorch.org/" target="_blank">Pytorch
               website</a>.
-            <pre><code class="lang-shell">pip3 <span class="hljs-keyword">install</span> torch torchvision torchaudio
+            <pre><code class="language-shell">pip3 install torch torchvision torchaudio
         </code></pre>
           </li>
           <li>Install Transformers using:
-            <pre><code class="lang-shell">pip <span class="hljs-keyword">install</span> transformers
+            <pre><code class="language-shell">pip install transformers
         </code></pre>
           </li>
           <li><em>Recommended</em>: Install VScode <a href="https://code.visualstudio.com/download"
               target="_blank">here</a>.</li>
           <li>Open VSCode and open the Jupyter Notebook files or open Jupyter Lab using:
-            <pre><code class="lang-shell"><span class="hljs-attribute">jupyter lab</span>
+            <pre><code class="language-shell">jupyter lab
         </code></pre>
           </li>
           <li>If you are using VSCode, you need to install the Jupyter Notebook extension.</li>
           <li>In VScode, select the Python interpreter for your environment (top right, usually!).</li>
+          <li>
+            If everything has worked then in the Python environment you should be able to run:
+            <pre><code class="language-python">
+              import torch
+            </code></pre>
+            Then:
+            <pre><code class="language-python">
+              torch.cuda.is_available()
+            </code></pre>
+            And if you have a GPU, you should see <code>True</code>, otherwise <code>False</code>.
+          </li>
         </ol>
-        <p><br /></p>
         <p>Each session:</p>
         <ul>
           <li>
@@ -868,6 +878,9 @@ <h3 class="featurette-heading">Licensing</h3>
   <!-- JavaScript -->
   <script src="js/jquery-1.10.2.js"></script>
   <script src="js/bootstrap.js"></script>
+  <link href="css/github-light-dark.css" rel="stylesheet">
+  <script src="js/highlight.min.js"></script>
+  <script>hljs.highlightAll();</script>
 
 </body>