newer/maintained syntax highlighting (#26)

* newer/maintained syntax highlighting Co-authored-by: Steve Hay <developer@stevenhay.com>
2 years ago · 48e693d1d2
parent 0c6a903a7e
commit 48e693d1d2
5 changed files with 55 additions and 20 deletions
--- a/static/css/highlight-Dark.css
+++ 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}
+
--- a/static/css/highlight-Light.css
+++ 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}
+
--- a/static/css/style.css
+++ b/static/css/style.css
@ -49,3 +49,8 @@
 .pastey-title {
    word-wrap:break-word;
 }
+
+.hljs-ln td {
+    padding-left: 1em !important;
+}
+
--- 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);
 }
@ -111,3 +111,5 @@ li.L0,li.L2,li.L4,li.L6,li.L8 {
 .opn, .clo {
    color: rgb(218, 218, 0);
 }
+
+
--- 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 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>
-        </div>

        <!-- QR Modal -->
        <div
@ -195,8 +193,8 @@
  <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">
@ -215,5 +213,10 @@
        });
    });
  </script>
+  <script type="text/javascript">
+    hljs.highlightAll(); 
+    hljs.initLineNumbersOnLoad();
+  </script>
+  
 </body>
 </html>