From 48e693d1d2dda5ad782d776a2d6099b3221453d3 Mon Sep 17 00:00:00 2001
From: Steve Hay <github@stevenhay.com>
Date: Tue, 6 Sep 2022 18:04:07 -0400
Subject: [PATCH] newer/maintained syntax highlighting (#26)

* newer/maintained syntax highlighting
Co-authored-by: Steve Hay <developer@stevenhay.com>
---
 static/css/highlight-Dark.css  | 11 ++++++++++
 static/css/highlight-Light.css | 14 +++++++++++++
 static/css/style.css           |  7 ++++++-
 static/themes/Dark.css         |  6 ++++--
 templates/view.html            | 37 ++++++++++++++++++----------------
 5 files changed, 55 insertions(+), 20 deletions(-)
 create mode 100644 static/css/highlight-Dark.css
 create mode 100644 static/css/highlight-Light.css

diff --git a/static/css/highlight-Dark.css b/static/css/highlight-Dark.css
new file mode 100644
index 0000000..296200a
--- /dev/null
+++ b/static/css/highlight-Dark.css
@@ -0,0 +1,11 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
+
diff --git a/static/css/highlight-Light.css b/static/css/highlight-Light.css
new file mode 100644
index 0000000..2d0aad6
--- /dev/null
+++ b/static/css/highlight-Light.css
@@ -0,0 +1,14 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: StackOverflow Light
+  Description: Light theme as used on stackoverflow.com
+  Author: stackoverflow.com
+  Maintainer: @Hirse
+  Website: https://github.com/StackExchange/Stacks
+  License: MIT
+  Updated: 2021-05-15
+
+  Updated for @stackoverflow/stacks v0.64.0
+  Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
+  Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
+*/.hljs{color:#2f3337;background:#f6f6f6}.hljs-subst{color:#2f3337}.hljs-comment{color:#656e77}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#015692}.hljs-attribute{color:#803378}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#b75501}.hljs-selector-class{color:#015692}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#54790d}.hljs-meta,.hljs-selector-pseudo{color:#015692}.hljs-built_in,.hljs-literal,.hljs-title{color:#b75501}.hljs-bullet,.hljs-code{color:#535a60}.hljs-meta .hljs-string{color:#54790d}.hljs-deletion{color:#c02d2e}.hljs-addition{color:#2f6f44}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
+
diff --git a/static/css/style.css b/static/css/style.css
index c1303a3..73d7ba0 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -48,4 +48,9 @@
 
 .pastey-title {
     word-wrap:break-word;
-}
\ No newline at end of file
+}
+
+.hljs-ln td {
+    padding-left: 1em !important;
+}
+
diff --git a/static/themes/Dark.css b/static/themes/Dark.css
index a572f18..3b9bb6b 100644
--- a/static/themes/Dark.css
+++ b/static/themes/Dark.css
@@ -1,4 +1,4 @@
-body, tr {
+body, table.table tr {
     background-color: #262626 !important;
     color: rgba(255, 255, 255);
 }
@@ -110,4 +110,6 @@ li.L0,li.L2,li.L4,li.L6,li.L8 {
 
 .opn, .clo {
     color: rgb(218, 218, 0);
-}
\ No newline at end of file
+}
+
+
diff --git a/templates/view.html b/templates/view.html
index c291ec3..418a69e 100644
--- a/templates/view.html
+++ b/templates/view.html
@@ -8,10 +8,9 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
     <link rel="stylesheet" href="/static/css/mdb.min.css" />
-    <link rel="stylesheet" href="/static/css/prettify.min.css" />
     <link rel="stylesheet" href="/static/css/style.css" />
     <link rel="stylesheet" href="/static/themes/{{ active_theme }}.css" />
-
+    <link rel="stylesheet" href="/static/css/highlight-{{ active_theme }}.css" />
     <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico"/>
 </head>
 <body>
@@ -98,8 +97,7 @@
       <div class="pastey-title">
         <h1 class="mb-3 h2" id="pastey-title">{{ paste.title }}</h1>
       </div>
-      
-      <span style="font-weight:bold;">Format: </span>{{ paste.language }}</span>
+      <span style="font-weight:bold;">Format: </span><span>{{ paste.language }}</span><br />      
       {% if not paste.encrypted %}
         <span>&nbsp;(<a href='{{ url }}/raw' target='_blank'><i class="fas fa-eye"></i>&nbsp;View Raw</a>)</span>
       {% endif %}<br />
@@ -144,15 +142,15 @@
   <!--Main layout-->
   <main class="my-5">
       <div class="container">
-        <div class="row">
-          <div class="col-md-12 mb-4">
-            {% if paste.language == "Plaintext" %}
-              <pre class="prettyprint nocode" id="pastey-content">{{ paste.content }}</pre>
-            {% else %}
-              <pre class="prettyprint linenums" id="pastey-content">{{ paste.content }}</pre>
-            {% endif %}
-          </div>    
-        </div>
+          <div class="row">
+              <div class="col-md-12 mb-4">
+                  {% if paste.language == "Plaintext" %}
+                  <pre><code class="plaintext" id="pastey-content">{{ paste.content }}</code></pre>
+                  {% else %}
+                  <pre><code id="pastey-content">{{ paste.content }}</code></pre>
+                  {% endif %}
+              </div>    
+          </div>
 
         <!-- QR Modal -->
         <div
@@ -195,9 +193,9 @@
   <script type="text/javascript" src="/static/js/common.js"></script>
   <script type="text/javascript" src="/static/js/qrcode.min.js"></script>
   <script type="text/javascript" src="/static/js/mdb.min.js"></script>
-  <script type="text/javascript" src="/static/js/prettify.min.js"></script>
-  <script type="text/javascript" src="/static/js/run_prettify.js"></script>
-  
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
+
   <!-- Decrypt paste and generate QR code -->
   <script type="text/javascript">
     $(document).ready(function() {
@@ -215,5 +213,10 @@
         });
     });
   </script>
+  <script type="text/javascript">
+    hljs.highlightAll(); 
+    hljs.initLineNumbersOnLoad();
+  </script>
+  
 </body>
-</html>
\ No newline at end of file
+</html>