[HTML] Add syntax highlighting via Highlight.js

Closes #138
pull/162/head
Oleksii Holub 6 years ago
parent 6fa61bf75a
commit 4046fd0ad9

@ -1,2 +1,3 @@
{{~ ThemeStyleSheet = include "HtmlDark.Theme.css" ~}} {{~ ThemeStyleSheet = include "HtmlDark.Theme.css" ~}}
{{~ HighlightJsStyleName = "solarized-dark" ~}}
{{~ include "HtmlShared.Main.html" ~}} {{~ include "HtmlShared.Main.html" ~}}

@ -14,12 +14,12 @@ a {
} }
.pre { .pre {
background-color: #2f3136; background-color: #2f3136 !important;
} }
.pre--multiline { .pre--multiline {
border-color: #282b30; border-color: #282b30 !important;
color: #839496; color: #839496 !important;
} }
.mention { .mention {

@ -1,2 +1,3 @@
{{~ ThemeStyleSheet = include "HtmlLight.Theme.css" ~}} {{~ ThemeStyleSheet = include "HtmlLight.Theme.css" ~}}
{{~ HighlightJsStyleName = "solarized-light" ~}}
{{~ include "HtmlShared.Main.html" ~}} {{~ include "HtmlShared.Main.html" ~}}

@ -14,12 +14,12 @@ a {
} }
.pre { .pre {
background-color: #f9f9f9; background-color: #f9f9f9 !important;
} }
.pre--multiline { .pre--multiline {
border-color: #f3f3f3; border-color: #f3f3f3 !important;
color: #657b83; color: #657b83 !important;
} }
.mention { .mention {

@ -2,15 +2,29 @@
<html lang="en"> <html lang="en">
<head> <head>
{{~ # Metadata ~}}
<title>{{ Model.Guild.Name | html.escape }} - {{ Model.Channel.Name | html.escape }}</title> <title>{{ Model.Guild.Name | html.escape }} - {{ Model.Channel.Name | html.escape }}</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
{{~ # Styles ~}}
<style> <style>
{{ include "HtmlShared.Main.css" }} {{ include "HtmlShared.Main.css" }}
</style> </style>
<style> <style>
{{ ThemeStyleSheet }} {{ ThemeStyleSheet }}
</style> </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> </head>
<body> <body>

Loading…
Cancel
Save