Added syntax highlighting with highlightjs, using agate style

This commit is contained in:
Tim Stallard 2016-11-04 22:36:18 +00:00
parent 1321a7c556
commit c3cfb353f3
3 changed files with 110 additions and 0 deletions

View File

@ -54,6 +54,7 @@ var docpadConfig = {
this.docpad.blocks["styles"].add([ this.docpad.blocks["styles"].add([
"/libs/Animate.css", "/libs/Animate.css",
"/libs/fa.css", "/libs/fa.css",
"/libs/agate.css",
"/styles.css", "/styles.css",
"https://fonts.googleapis.com/css?family=Open+Sans" "https://fonts.googleapis.com/css?family=Open+Sans"
]); ]);

View File

@ -7,6 +7,7 @@
"docpad-plugin-autoprefix": "~2.0.0", "docpad-plugin-autoprefix": "~2.0.0",
"docpad-plugin-cleanurls": "~2.8.1", "docpad-plugin-cleanurls": "~2.8.1",
"docpad-plugin-ejs": "~2.0.2", "docpad-plugin-ejs": "~2.0.2",
"docpad-plugin-highlightjs": "~2.4.0",
"docpad-plugin-livereload": "~2.7.1", "docpad-plugin-livereload": "~2.7.1",
"docpad-plugin-marked": "~2.3.0", "docpad-plugin-marked": "~2.3.0",
"docpad-plugin-moment": "~2.0.2", "docpad-plugin-moment": "~2.0.2",

108
src/files/libs/agate.css Normal file
View File

@ -0,0 +1,108 @@
/*!
* Agate by Taufik Nurrohman <https://github.com/tovic>
* ----------------------------------------------------
*
* #ade5fc
* #a2fca2
* #c6b4f0
* #d36363
* #fcc28c
* #fc9b9b
* #ffa
* #fff
* #333
* #62c8f3
* #888
*
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #333;
color: white;
}
.hljs-name,
.hljs-strong {
font-weight: bold;
}
.hljs-code,
.hljs-emphasis {
font-style: italic;
}
.hljs-tag {
color: #62c8f3;
}
.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-selector-class {
color: #ade5fc;
}
.hljs-string,
.hljs-bullet {
color: #a2fca2;
}
.hljs-type,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-quote,
.hljs-built_in,
.hljs-builtin-name {
color: #ffa;
}
.hljs-number,
.hljs-symbol,
.hljs-bullet {
color: #d36363;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
color: #fcc28c;
}
.hljs-comment,
.hljs-deletion,
.hljs-code {
color: #888;
}
.hljs-regexp,
.hljs-link {
color: #c6b4f0;
}
.hljs-meta {
color: #fc9b9b;
}
.hljs-deletion {
background-color: #fc9b9b;
color: #333;
}
.hljs-addition {
background-color: #a2fca2;
color: #333;
}
.hljs a {
color: inherit;
}
.hljs a:focus,
.hljs a:hover {
color: inherit;
text-decoration: underline;
}