added code syntax highlighting

This commit is contained in:
Ellpeck 2019-10-03 15:15:25 +02:00
parent 846ba6aa58
commit 9ee1e22192
6 changed files with 330 additions and 2 deletions

View file

@ -12,6 +12,7 @@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico"> <link rel="icon" href="favicon.ico">
@ -25,7 +26,11 @@
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>
<script src="lib/showdown-prettify.js"></script>
<script src="scripts/main.js"></script> <script src="scripts/main.js"></script>
</head> </head>

153
lib/prettify.css Normal file
View file

@ -0,0 +1,153 @@
/**
* @license
* Copyright (C) 2015 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* Pretty printing styles. Used with prettify.js. */
/* SPAN elements with the classes below are added by prettyprint. */
.pln {
color: #000
}
/* plain text */
@media screen {
.str {
color: #080
}
/* string content */
.kwd {
color: #008
}
/* a keyword */
.com {
color: #800
}
/* a comment */
.typ {
color: #606
}
/* a type name */
.lit {
color: #066
}
/* a literal value */
/* punctuation, lisp open bracket, lisp close bracket */
.pun,
.opn,
.clo {
color: #660
}
.tag {
color: #008
}
/* a markup tag name */
.atn {
color: #606
}
/* a markup attribute name */
.atv {
color: #080
}
/* a markup attribute value */
.dec,
.var {
color: #606
}
/* a declaration; a variable name */
.fun {
color: red
}
/* a function name */
}
/* Use higher contrast and text-weight for printable form. */
@media print,
projection {
.str {
color: #060
}
.kwd {
color: #006;
font-weight: bold
}
.com {
color: #600;
font-style: italic
}
.typ {
color: #404;
font-weight: bold
}
.lit {
color: #044
}
.pun,
.opn,
.clo {
color: #440
}
.tag {
color: #006;
font-weight: bold
}
.atn {
color: #404
}
.atv {
color: #060
}
}
/* Put a border around prettyprinted code snippets. */
pre.prettyprint {
border: 1px solid #888
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin-top: 0;
margin-bottom: 0
}
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
background: #eee
}

33
lib/showdown-prettify.js Normal file
View file

@ -0,0 +1,33 @@
/*! showdown-prettify 06-01-2016 */
(function (extension) {
'use strict';
if (typeof showdown !== 'undefined') {
extension(showdown);
} else if (typeof define === 'function' && define.amd) {
define(['showdown'], extension);
} else if (typeof exports === 'object') {
module.exports = extension(require('showdown'));
} else {
throw Error('Could not find showdown library');
}
}(function (showdown) {
'use strict';
showdown.extension('prettify', function () {
return [{
type: 'output',
filter: function (source) {
return source.replace(/(<pre[^>]*>)?[\n\s]?<code([^>]*)>/gi, function (match, pre, codeClass) {
if (pre) {
return '<pre class="prettyprint linenums"><code' + codeClass + '>';
} else {
return ' <code class="prettyprint">';
}
});
}
}];
});
}));
//# sourceMappingURL=showdown-prettify.js.map

131
lib/sons-of-obsidian.css Normal file
View file

@ -0,0 +1,131 @@
/*
* Derived from einaros's Sons of Obsidian theme at
* http://studiostyl.es/schemes/son-of-obsidian by
* Alex Ford of CodeTunnel:
* http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme
*/
.str {
color: #EC7600;
}
.kwd {
color: #93C763;
}
.com {
color: #66747B;
}
.typ {
color: #678CB1;
}
.lit {
color: #FACD22;
}
.pun {
color: #F1F2F3;
}
.pln {
color: #F1F2F3;
}
.tag {
color: #8AC763;
}
.atn {
color: #E0E2E4;
}
.atv {
color: #EC7600;
}
.dec {
color: purple;
}
pre.prettyprint {
border: 1px solid #000;
}
ol.linenums {
margin-top: 0;
margin-bottom: 0;
}
.prettyprint {
background: #000;
}
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
color: #555;
list-style-type: decimal;
}
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
background: #111;
}
@media print {
.str {
color: #060;
}
.kwd {
color: #006;
font-weight: bold;
}
.com {
color: #600;
font-style: italic;
}
.typ {
color: #404;
font-weight: bold;
}
.lit {
color: #044;
}
.pun {
color: #440;
}
.pln {
color: #000;
}
.tag {
color: #006;
font-weight: bold;
}
.atn {
color: #404;
}
.atv {
color: #060;
}
}

View file

@ -1,6 +1,7 @@
let converter = new showdown.Converter({ let converter = new showdown.Converter({
parseImgDimensions: true, parseImgDimensions: true,
headerLevelStart: 3 headerLevelStart: 3,
extensions: ["prettify"]
}); });
$.ajax({ $.ajax({
dataType: "json", dataType: "json",
@ -66,6 +67,7 @@ function openBlogPost(id, onDone) {
discuss.html("Discuss this post"); discuss.html("Discuss this post");
$("#blog-summary-" + id).hide(); $("#blog-summary-" + id).hide();
PR.prettyPrint();
if (onDone) if (onDone)
onDone(); onDone();
}); });

View file

@ -2,8 +2,10 @@ let dark = getCookie("dark") === "true";
let cookieNotification = getCookie("notification") !== "true"; let cookieNotification = getCookie("notification") !== "true";
let pride = new Date().getMonth() == 5; let pride = new Date().getMonth() == 5;
if (dark) if (dark) {
document.write('<link rel="stylesheet" href="dark.css">') document.write('<link rel="stylesheet" href="dark.css">')
document.write('<link rel="stylesheet" href="lib/sons-of-obsidian.css">')
}
if (pride) if (pride)
document.write('<link rel="stylesheet" href="pride.css">') document.write('<link rel="stylesheet" href="pride.css">')
@ -37,6 +39,8 @@ $(function () {
window.location.hash = ""; window.location.hash = "";
location.reload(); location.reload();
}); });
PR.prettyPrint();
}); });
function getCookie(key) { function getCookie(key) {