actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

apply highlightjs style by class on body

This commit is contained in:
Gambhiro 2017-01-18 09:20:52 +00:00
parent eb5a9b987f
commit 27721c26b5
7 changed files with 234 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
data/_html-template/_layouts/page.hbs
View File

@ -11,18 +11,11 @@
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="css/book.css">
<!-- TODO use OpenSans from local -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/book.css">
<link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css">
<!-- TODO Loading both only works b/c book.js disables one of these with .prop(), selecting one by its href. It would make more sense to put the different styles under a class ("highlight-light" / "highlight-dark") and add or remove that class on the <body> or #page-wrapper. -->
<link rel="stylesheet" href="css/highlight.css">
<link rel="stylesheet" href="css/tomorrow-night.css">
<!-- TODO use MathJax from local -->
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="js/jquery-2.1.4.min.js"></script> <script src="js/jquery-2.1.4.min.js"></script>

2
data/_html-template/_stylus/book.styl
View File

@ -1,5 +1,6 @@
@import "nib" @import "nib"
@import 'highlightjs'
@import 'general' @import 'general'
@import 'sidebar' @import 'sidebar'
@import 'page' @import 'page'
@ -8,3 +9,4 @@
@import 'theme-popup' @import 'theme-popup'
@import 'themes' @import 'themes'
@import 'print' @import 'print'

79
data/_html-template/css/highlight.css → data/_html-template/_stylus/highlightjs-light.styl
View File

@ -1,24 +1,19 @@
/* Modified Base16 Atelier Dune Light - Theme /* Modified Base16 Atelier Dune Light - Theme
/* Original by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */ /* Original by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */
.hljs
.hljs { display: block
display: block; overflow-x: auto
overflow-x: auto; background: #f1f1f1
background: #f1f1f1; color: #6e6b5e
color: #6e6b5e; padding: 0.5em
padding: 0.5em; -webkit-text-size-adjust: none
-webkit-text-size-adjust: none;
}
/* Atelier-Dune Comment */ /* Atelier-Dune Comment */
.hljs-comment { .hljs-comment
color: #AAA; color: #AAA
}
/* Atelier-Dune Red */ /* Atelier-Dune Red */
.hljs-variable, .hljs-variable,
.hljs-tag, .hljs-tag,
.hljs-regexp, .hljs-regexp,
.hljs-name, .hljs-name,
@ -29,9 +24,8 @@
.html .hljs-doctype, .html .hljs-doctype,
.css .hljs-id, .css .hljs-id,
.css .hljs-class, .css .hljs-class,
.css .hljs-pseudo { .css .hljs-pseudo
color: #d73737; color: #d73737
}
/* Atelier-Dune Orange */ /* Atelier-Dune Orange */
.hljs-number, .hljs-number,
@ -40,30 +34,26 @@
.hljs-literal, .hljs-literal,
.hljs-params, .hljs-params,
.hljs-attribute, .hljs-attribute,
.hljs-constant { .hljs-constant
color: #b65611; color: #b65611
}
/* Atelier-Dune Yellow */ /* Atelier-Dune Yellow */
.ruby .hljs-class .hljs-title, .ruby .hljs-class .hljs-title,
.css .hljs-rule .hljs-attribute { .css .hljs-rule .hljs-attribute
color: #ae9513; color: #ae9513
}
/* Atelier-Dune Green */ /* Atelier-Dune Green */
.hljs-string, .hljs-string,
.hljs-value, .hljs-value,
.hljs-inheritance, .hljs-inheritance,
.ruby .hljs-symbol, .ruby .hljs-symbol,
.xml .hljs-cdata { .xml .hljs-cdata
color: #2a9292; color: #2a9292
}
/* Atelier-Dune Aqua */ /* Atelier-Dune Aqua */
.hljs-title, .hljs-title,
.css .hljs-hexcolor { .css .hljs-hexcolor
color: #1fad83; color: #1fad83
}
/* Atelier-Dune Blue */ /* Atelier-Dune Blue */
.hljs-function, .hljs-function,
@ -73,15 +63,13 @@
.ruby .hljs-title .hljs-keyword, .ruby .hljs-title .hljs-keyword,
.perl .hljs-sub, .perl .hljs-sub,
.javascript .hljs-title, .javascript .hljs-title,
.coffeescript .hljs-title { .coffeescript .hljs-title
color: #6684e1; color: #6684e1
}
/* Atelier-Dune Purple */ /* Atelier-Dune Purple */
.hljs-keyword, .hljs-keyword,
.javascript .hljs-function { .javascript .hljs-function
color: #b854d4; color: #b854d4
}
.coffeescript .javascript, .coffeescript .javascript,
.javascript .xml, .javascript .xml,
@ -89,19 +77,16 @@
.xml .javascript, .xml .javascript,
.xml .vbscript, .xml .vbscript,
.xml .css, .xml .css,
.xml .hljs-cdata { .xml .hljs-cdata
opacity: 0.5; opacity: 0.5
}
/* markdown */ /* markdown */
.hljs-header { .hljs-header
color: #A30000; color: #A30000
}
.hljs-link_label { .hljs-link_label
color: #33CCCC; color: #33CCCC
}
.hljs-link_url
color: #CC66FF
.hljs-link_url {
color: #CC66FF;
}

62
data/_html-template/css/tomorrow-night.css → data/_html-template/_stylus/highlightjs-tomorrow-night.styl
View File

@ -2,11 +2,9 @@
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */ /* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Tomorrow Comment */ /* Tomorrow Comment */
.hljs-comment { .hljs-comment
color: #969896; color: #969896
}
/* Tomorrow Red */ /* Tomorrow Red */
.hljs-variable, .hljs-variable,
@ -20,9 +18,8 @@
.html .hljs-doctype, .html .hljs-doctype,
.css .hljs-id, .css .hljs-id,
.css .hljs-class, .css .hljs-class,
.css .hljs-pseudo { .css .hljs-pseudo
color: #cc6666; color: #cc6666
}
/* Tomorrow Orange */ /* Tomorrow Orange */
.hljs-number, .hljs-number,
@ -31,15 +28,13 @@
.hljs-built_in, .hljs-built_in,
.hljs-literal, .hljs-literal,
.hljs-params, .hljs-params,
.hljs-constant { .hljs-constant
color: #de935f; color: #de935f
}
/* Tomorrow Yellow */ /* Tomorrow Yellow */
.ruby .hljs-class .hljs-title, .ruby .hljs-class .hljs-title,
.css .hljs-rule .hljs-attribute { .css .hljs-rule .hljs-attribute
color: #f0c674; color: #f0c674
}
/* Tomorrow Green */ /* Tomorrow Green */
.hljs-string, .hljs-string,
@ -48,15 +43,13 @@
.hljs-header, .hljs-header,
.hljs-name, .hljs-name,
.ruby .hljs-symbol, .ruby .hljs-symbol,
.xml .hljs-cdata { .xml .hljs-cdata
color: #b5bd68; color: #b5bd68
}
/* Tomorrow Aqua */ /* Tomorrow Aqua */
.hljs-title, .hljs-title,
.css .hljs-hexcolor { .css .hljs-hexcolor
color: #8abeb7; color: #8abeb7
}
/* Tomorrow Blue */ /* Tomorrow Blue */
.hljs-function, .hljs-function,
@ -66,24 +59,21 @@
.ruby .hljs-title .hljs-keyword, .ruby .hljs-title .hljs-keyword,
.perl .hljs-sub, .perl .hljs-sub,
.javascript .hljs-title, .javascript .hljs-title,
.coffeescript .hljs-title { .coffeescript .hljs-title
color: #81a2be; color: #81a2be
}
/* Tomorrow Purple */ /* Tomorrow Purple */
.hljs-keyword, .hljs-keyword,
.javascript .hljs-function { .javascript .hljs-function
color: #b294bb; color: #b294bb
}
.hljs { .hljs
display: block; display: block
overflow-x: auto; overflow-x: auto
background: #1d1f21; background: #1d1f21
color: #c5c8c6; color: #c5c8c6
padding: 0.5em; padding: 0.5em
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none
}
.coffeescript .javascript, .coffeescript .javascript,
.javascript .xml, .javascript .xml,
@ -91,6 +81,6 @@
.xml .javascript, .xml .javascript,
.xml .vbscript, .xml .vbscript,
.xml .css, .xml .css,
.xml .hljs-cdata { .xml .hljs-cdata
opacity: 0.5; opacity: 0.5
}

7
data/_html-template/_stylus/highlightjs.styl Normal file
View File

@ -0,0 +1,7 @@
body.highlightjs-light {
@import 'highlightjs-light'
}
body.highlightjs-dark {
@import 'highlightjs-tomorrow-night'
}

159
data/_html-template/css/book.css
View File

@ -1,3 +1,162 @@
body.highlightjs-light .hljs {
display: block;
overflow-x: auto;
background: #f1f1f1;
color: #6e6b5e;
padding: 0.5em;
-webkit-text-size-adjust: none;
}
body.highlightjs-light .hljs-comment {
color: #aaa;
}
body.highlightjs-light .hljs-variable,
body.highlightjs-light .hljs-tag,
body.highlightjs-light .hljs-regexp,
body.highlightjs-light .hljs-name,
body.highlightjs-light .ruby .hljs-constant,
body.highlightjs-light .xml .hljs-tag .hljs-title,
body.highlightjs-light .xml .hljs-pi,
body.highlightjs-light .xml .hljs-doctype,
body.highlightjs-light .html .hljs-doctype,
body.highlightjs-light .css .hljs-id,
body.highlightjs-light .css .hljs-class,
body.highlightjs-light .css .hljs-pseudo {
color: #d73737;
}
body.highlightjs-light .hljs-number,
body.highlightjs-light .hljs-preprocessor,
body.highlightjs-light .hljs-built_in,
body.highlightjs-light .hljs-literal,
body.highlightjs-light .hljs-params,
body.highlightjs-light .hljs-attribute,
body.highlightjs-light .hljs-constant {
color: #b65611;
}
body.highlightjs-light .ruby .hljs-class .hljs-title,
body.highlightjs-light .css .hljs-rule .hljs-attribute {
color: #ae9513;
}
body.highlightjs-light .hljs-string,
body.highlightjs-light .hljs-value,
body.highlightjs-light .hljs-inheritance,
body.highlightjs-light .ruby .hljs-symbol,
body.highlightjs-light .xml .hljs-cdata {
color: #2a9292;
}
body.highlightjs-light .hljs-title,
body.highlightjs-light .css .hljs-hexcolor {
color: #1fad83;
}
body.highlightjs-light .hljs-function,
body.highlightjs-light .python .hljs-decorator,
body.highlightjs-light .python .hljs-title,
body.highlightjs-light .ruby .hljs-function .hljs-title,
body.highlightjs-light .ruby .hljs-title .hljs-keyword,
body.highlightjs-light .perl .hljs-sub,
body.highlightjs-light .javascript .hljs-title,
body.highlightjs-light .coffeescript .hljs-title {
color: #6684e1;
}
body.highlightjs-light .hljs-keyword,
body.highlightjs-light .javascript .hljs-function {
color: #b854d4;
}
body.highlightjs-light .coffeescript .javascript,
body.highlightjs-light .javascript .xml,
body.highlightjs-light .tex .hljs-formula,
body.highlightjs-light .xml .javascript,
body.highlightjs-light .xml .vbscript,
body.highlightjs-light .xml .css,
body.highlightjs-light .xml .hljs-cdata {
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}
body.highlightjs-light .hljs-header {
color: #a30000;
}
body.highlightjs-light .hljs-link_label {
color: #3cc;
}
body.highlightjs-light .hljs-link_url {
color: #c6f;
}
body.highlightjs-dark .hljs-comment {
color: #969896;
}
body.highlightjs-dark .hljs-variable,
body.highlightjs-dark .hljs-attribute,
body.highlightjs-dark .hljs-tag,
body.highlightjs-dark .hljs-regexp,
body.highlightjs-dark .ruby .hljs-constant,
body.highlightjs-dark .xml .hljs-tag .hljs-title,
body.highlightjs-dark .xml .hljs-pi,
body.highlightjs-dark .xml .hljs-doctype,
body.highlightjs-dark .html .hljs-doctype,
body.highlightjs-dark .css .hljs-id,
body.highlightjs-dark .css .hljs-class,
body.highlightjs-dark .css .hljs-pseudo {
color: #c66;
}
body.highlightjs-dark .hljs-number,
body.highlightjs-dark .hljs-preprocessor,
body.highlightjs-dark .hljs-pragma,
body.highlightjs-dark .hljs-built_in,
body.highlightjs-dark .hljs-literal,
body.highlightjs-dark .hljs-params,
body.highlightjs-dark .hljs-constant {
color: #de935f;
}
body.highlightjs-dark .ruby .hljs-class .hljs-title,
body.highlightjs-dark .css .hljs-rule .hljs-attribute {
color: #f0c674;
}
body.highlightjs-dark .hljs-string,
body.highlightjs-dark .hljs-value,
body.highlightjs-dark .hljs-inheritance,
body.highlightjs-dark .hljs-header,
body.highlightjs-dark .hljs-name,
body.highlightjs-dark .ruby .hljs-symbol,
body.highlightjs-dark .xml .hljs-cdata {
color: #b5bd68;
}
body.highlightjs-dark .hljs-title,
body.highlightjs-dark .css .hljs-hexcolor {
color: #8abeb7;
}
body.highlightjs-dark .hljs-function,
body.highlightjs-dark .python .hljs-decorator,
body.highlightjs-dark .python .hljs-title,
body.highlightjs-dark .ruby .hljs-function .hljs-title,
body.highlightjs-dark .ruby .hljs-title .hljs-keyword,
body.highlightjs-dark .perl .hljs-sub,
body.highlightjs-dark .javascript .hljs-title,
body.highlightjs-dark .coffeescript .hljs-title {
color: #81a2be;
}
body.highlightjs-dark .hljs-keyword,
body.highlightjs-dark .javascript .hljs-function {
color: #b294bb;
}
body.highlightjs-dark .hljs {
display: block;
overflow-x: auto;
background: #1d1f21;
color: #c5c8c6;
padding: 0.5em;
-webkit-text-size-adjust: none;
}
body.highlightjs-dark .coffeescript .javascript,
body.highlightjs-dark .javascript .xml,
body.highlightjs-dark .tex .hljs-formula,
body.highlightjs-dark .xml .javascript,
body.highlightjs-dark .xml .vbscript,
body.highlightjs-dark .xml .css,
body.highlightjs-dark .xml .hljs-cdata {
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}
html, html,
body { body {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;

26
data/_html-template/js/book.js
View File

@ -16,13 +16,13 @@ $( document ).ready(function() {
// Syntax highlighting Configuration // Syntax highlighting Configuration
hljs.configure({ hljs.configure({
tabReplace: ' ', // 4 spaces tabReplace: ' ', // 4 spaces
languages: [], // Languages used for auto-detection languages: [] // Languages used for auto-detection
}); });
$('code').each(function(i, block) { $('code').each(function(i, block) {
hljs.highlightBlock(block); hljs.highlightBlock(block);
}); });
// Adding the hljs class gives code blocks the color css // Adding the hljs class gives code blocks the color css
// even if highlighting doesn't apply // even if highlighting doesn't apply
$('code').addClass('hljs'); $('code').addClass('hljs');
@ -55,11 +55,10 @@ $( document ).ready(function() {
var page_wrapper = $("#page-wrapper"); var page_wrapper = $("#page-wrapper");
var content = $("#content"); var content = $("#content");
// Add anchors for all content headers // Add anchors for all content headers
content.find("h1, h2, h3, h4, h5").wrap(function(){ content.find("h1, h2, h3, h4, h5").wrap(function(){
var wrapper = $("<a class=\"header\">"); var wrapper = $("<a class=\"header\">");
var header_name = $(this).text().trim().replace(/\W/g, '-') var header_name = $(this).text().trim().replace(/\W/g, '-');
wrapper.attr("name", header_name); wrapper.attr("name", header_name);
// Add so that when you click the link actually shows up in the url bar... // Add so that when you click the link actually shows up in the url bar...
// Remove any existing anchor then append the new one // Remove any existing anchor then append the new one
@ -68,7 +67,6 @@ $( document ).ready(function() {
return wrapper; return wrapper;
}); });
// Toggle sidebar // Toggle sidebar
$("#sidebar-toggle").click(function(event){ $("#sidebar-toggle").click(function(event){
if ( html.hasClass("sidebar-hidden") ) { if ( html.hasClass("sidebar-hidden") ) {
@ -88,14 +86,12 @@ $( document ).ready(function() {
} }
}); });
// Scroll sidebar to current active section // Scroll sidebar to current active section
var activeSection = sidebar.find(".active"); var activeSection = sidebar.find(".active");
if(activeSection.length) { if(activeSection.length) {
sidebar.scrollTop(activeSection.offset().top); sidebar.scrollTop(activeSection.offset().top);
} }
// Print button // Print button
$("#print-button").click(function(){ $("#print-button").click(function(){
var printWindow = window.open("print.html"); var printWindow = window.open("print.html");
@ -105,7 +101,6 @@ $( document ).ready(function() {
window.print(); window.print();
} }
// Theme button // Theme button
$("#theme-toggle").click(function(){ $("#theme-toggle").click(function(){
if($('.theme-popup').length) { if($('.theme-popup').length) {
@ -117,7 +112,6 @@ $( document ).ready(function() {
.append($('<div class="theme" id="coal">Coal</div>')) .append($('<div class="theme" id="coal">Coal</div>'))
.append($('<div class="theme" id="navy">Navy</div>')); .append($('<div class="theme" id="navy">Navy</div>'));
popup.insertAfter(this); popup.insertAfter(this);
$('.theme').click(function(){ $('.theme').click(function(){
@ -130,20 +124,17 @@ $( document ).ready(function() {
}); });
function set_theme(theme) { function set_theme(theme) {
$('body').removeClass().addClass(theme);
if (theme == 'coal' || theme == 'navy') { if (theme == 'coal' || theme == 'navy') {
$("[href='css/tomorrow-night.css']").prop('disabled', false); $("body").addClass("highlightjs-dark");
$("[href='css/highlight.css']").prop('disabled', true);
} else { } else {
$("[href='css/tomorrow-night.css']").prop('disabled', true); $("body").addClass("highlightjs-light");
$("[href='css/highlight.css']").prop('disabled', false);
} }
localStorage.setItem('theme', theme); localStorage.setItem('theme', theme);
$('body').removeClass().addClass(theme);
} }
// Hide Rust code lines prepended with a specific character // Hide Rust code lines prepended with a specific character
var hiding_character = "#"; var hiding_character = "#";
@ -193,7 +184,6 @@ $( document ).ready(function() {
}); });
}); });
// Process playpen code blocks // Process playpen code blocks
$(".playpen").each(function(block){ $(".playpen").each(function(block){
var pre_block = $(this); var pre_block = $(this);
@ -210,10 +200,8 @@ $( document ).ready(function() {
}); });
}); });
}); });
function run_rust_code(code_block) { function run_rust_code(code_block) {
var result_block = code_block.find(".result"); var result_block = code_block.find(".result");
if(result_block.length === 0) { if(result_block.length === 0) {