[HTML] Add syntax highlighting via Highlight.js

Closes #138
6 years ago · 4046fd0ad9
parent 6fa61bf75a
commit 4046fd0ad9
5 changed files with 22 additions and 6 deletions
--- a/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlDark/Template.html
+++ b/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlDark/Template.html
@ -1,2 +1,3 @@
 {{~ ThemeStyleSheet = include "HtmlDark.Theme.css" ~}}
+{{~ HighlightJsStyleName = "solarized-dark" ~}}
 {{~ include "HtmlShared.Main.html" ~}}
--- a/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlDark/Theme.css
+++ b/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlDark/Theme.css
@ -14,12 +14,12 @@ a {
 }

 .pre {
-    background-color: #2f3136;
+    background-color: #2f3136 !important;
 }

 .pre--multiline {
-    border-color: #282b30;
-    color: #839496;
+    border-color: #282b30 !important;
+    color: #839496 !important;
 }

 .mention {
--- a/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlLight/Template.html
+++ b/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlLight/Template.html
@ -1,2 +1,3 @@
 {{~ ThemeStyleSheet = include "HtmlLight.Theme.css" ~}}
+{{~ HighlightJsStyleName = "solarized-light" ~}}
 {{~ include "HtmlShared.Main.html" ~}}
--- a/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlLight/Theme.css
+++ b/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlLight/Theme.css
@ -14,12 +14,12 @@ a {
 }

 .pre {
-    background-color: #f9f9f9;
+    background-color: #f9f9f9 !important;
 }

 .pre--multiline {
-    border-color: #f3f3f3;
-    color: #657b83;
+    border-color: #f3f3f3 !important;
+    color: #657b83 !important;
 }

 .mention {
--- a/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlShared/Main.html
+++ b/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlShared/Main.html
@ -2,15 +2,29 @@
 <html lang="en">

 <head>
+    {{~ # Metadata ~}}
    <title>{{ Model.Guild.Name | html.escape }} - {{ Model.Channel.Name | html.escape }}</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
+
+    {{~ # Styles ~}}
    <style>
        {{ include "HtmlShared.Main.css" }}
    </style>
    <style>
        {{ ThemeStyleSheet }}
    </style>
+
+    {{~ # Syntax highlighting ~}}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/{{HighlightJsStyleName}}.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            document.querySelectorAll('.pre--multiline').forEach((block) => {
+                hljs.highlightBlock(block);
+            });
+        });
+    </script>
 </head>
 <body>