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="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 rel="stylesheet" href="css/book.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="js/jquery-2.1.4.min.js"></script>

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

@ -1,5 +1,6 @@
@import "nib"
@import 'highlightjs'
@import 'general'
@import 'sidebar'
@import 'page'
@ -8,3 +9,4 @@
@import 'theme-popup'
@import 'themes'
@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
/* Original by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */
.hljs {
display: block;
overflow-x: auto;
background: #f1f1f1;
color: #6e6b5e;
padding: 0.5em;
-webkit-text-size-adjust: none;
}
.hljs
display: block
overflow-x: auto
background: #f1f1f1
color: #6e6b5e
padding: 0.5em
-webkit-text-size-adjust: none
/* Atelier-Dune Comment */
.hljs-comment {
color: #AAA;
}
.hljs-comment
color: #AAA
/* Atelier-Dune Red */
.hljs-variable,
.hljs-tag,
.hljs-regexp,
.hljs-name,
@ -29,9 +24,8 @@
.html .hljs-doctype,
.css .hljs-id,
.css .hljs-class,
.css .hljs-pseudo {
color: #d73737;
}
.css .hljs-pseudo
color: #d73737
/* Atelier-Dune Orange */
.hljs-number,
@ -40,30 +34,26 @@
.hljs-literal,
.hljs-params,
.hljs-attribute,
.hljs-constant {
color: #b65611;
}
.hljs-constant
color: #b65611
/* Atelier-Dune Yellow */
.ruby .hljs-class .hljs-title,
.css .hljs-rule .hljs-attribute {
color: #ae9513;
}
.css .hljs-rule .hljs-attribute
color: #ae9513
/* Atelier-Dune Green */
.hljs-string,
.hljs-value,
.hljs-inheritance,
.ruby .hljs-symbol,
.xml .hljs-cdata {
color: #2a9292;
}
.xml .hljs-cdata
color: #2a9292
/* Atelier-Dune Aqua */
.hljs-title,
.css .hljs-hexcolor {
color: #1fad83;
}
.css .hljs-hexcolor
color: #1fad83
/* Atelier-Dune Blue */
.hljs-function,
@ -73,15 +63,13 @@
.ruby .hljs-title .hljs-keyword,
.perl .hljs-sub,
.javascript .hljs-title,
.coffeescript .hljs-title {
color: #6684e1;
}
.coffeescript .hljs-title
color: #6684e1
/* Atelier-Dune Purple */
.hljs-keyword,
.javascript .hljs-function {
color: #b854d4;
}
.javascript .hljs-function
color: #b854d4
.coffeescript .javascript,
.javascript .xml,
@ -89,19 +77,16 @@
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
opacity: 0.5;
}
.xml .hljs-cdata
opacity: 0.5
/* markdown */
.hljs-header {
color: #A30000;
}
.hljs-header
color: #A30000
.hljs-link_label {
color: #33CCCC;
}
.hljs-link_label
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 */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Tomorrow Comment */
.hljs-comment {
color: #969896;
}
.hljs-comment
color: #969896
/* Tomorrow Red */
.hljs-variable,
@ -20,9 +18,8 @@
.html .hljs-doctype,
.css .hljs-id,
.css .hljs-class,
.css .hljs-pseudo {
color: #cc6666;
}
.css .hljs-pseudo
color: #cc6666
/* Tomorrow Orange */
.hljs-number,
@ -31,15 +28,13 @@
.hljs-built_in,
.hljs-literal,
.hljs-params,
.hljs-constant {
color: #de935f;
}
.hljs-constant
color: #de935f
/* Tomorrow Yellow */
.ruby .hljs-class .hljs-title,
.css .hljs-rule .hljs-attribute {
color: #f0c674;
}
.css .hljs-rule .hljs-attribute
color: #f0c674
/* Tomorrow Green */
.hljs-string,
@ -48,15 +43,13 @@
.hljs-header,
.hljs-name,
.ruby .hljs-symbol,
.xml .hljs-cdata {
color: #b5bd68;
}
.xml .hljs-cdata
color: #b5bd68
/* Tomorrow Aqua */
.hljs-title,
.css .hljs-hexcolor {
color: #8abeb7;
}
.css .hljs-hexcolor
color: #8abeb7
/* Tomorrow Blue */
.hljs-function,
@ -66,24 +59,21 @@
.ruby .hljs-title .hljs-keyword,
.perl .hljs-sub,
.javascript .hljs-title,
.coffeescript .hljs-title {
color: #81a2be;
}
.coffeescript .hljs-title
color: #81a2be
/* Tomorrow Purple */
.hljs-keyword,
.javascript .hljs-function {
color: #b294bb;
}
.javascript .hljs-function
color: #b294bb
.hljs {
display: block;
overflow-x: auto;
background: #1d1f21;
color: #c5c8c6;
padding: 0.5em;
-webkit-text-size-adjust: none;
}
.hljs
display: block
overflow-x: auto
background: #1d1f21
color: #c5c8c6
padding: 0.5em
-webkit-text-size-adjust: none
.coffeescript .javascript,
.javascript .xml,
@ -91,6 +81,6 @@
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
opacity: 0.5;
}
.xml .hljs-cdata
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,
body {
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
hljs.configure({
tabReplace: ' ', // 4 spaces
languages: [], // Languages used for auto-detection
languages: [] // Languages used for auto-detection
});
$('code').each(function(i, block) {
hljs.highlightBlock(block);
});
// Adding the hljs class gives code blocks the color css
// even if highlighting doesn't apply
$('code').addClass('hljs');
@ -55,11 +55,10 @@ $( document ).ready(function() {
var page_wrapper = $("#page-wrapper");
var content = $("#content");
// Add anchors for all content headers
content.find("h1, h2, h3, h4, h5").wrap(function(){
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);
// Add so that when you click the link actually shows up in the url bar...
// Remove any existing anchor then append the new one
@ -68,7 +67,6 @@ $( document ).ready(function() {
return wrapper;
});
// Toggle sidebar
$("#sidebar-toggle").click(function(event){
if ( html.hasClass("sidebar-hidden") ) {
@ -88,14 +86,12 @@ $( document ).ready(function() {
}
});
// Scroll sidebar to current active section
var activeSection = sidebar.find(".active");
if(activeSection.length) {
sidebar.scrollTop(activeSection.offset().top);
}
// Print button
$("#print-button").click(function(){
var printWindow = window.open("print.html");
@ -105,7 +101,6 @@ $( document ).ready(function() {
window.print();
}
// Theme button
$("#theme-toggle").click(function(){
if($('.theme-popup').length) {
@ -117,7 +112,6 @@ $( document ).ready(function() {
.append($('<div class="theme" id="coal">Coal</div>'))
.append($('<div class="theme" id="navy">Navy</div>'));
popup.insertAfter(this);
$('.theme').click(function(){
@ -130,20 +124,17 @@ $( document ).ready(function() {
});
function set_theme(theme) {
$('body').removeClass().addClass(theme);
if (theme == 'coal' || theme == 'navy') {
$("[href='css/tomorrow-night.css']").prop('disabled', false);
$("[href='css/highlight.css']").prop('disabled', true);
$("body").addClass("highlightjs-dark");
} else {
$("[href='css/tomorrow-night.css']").prop('disabled', true);
$("[href='css/highlight.css']").prop('disabled', false);
$("body").addClass("highlightjs-light");
}
localStorage.setItem('theme', theme);
$('body').removeClass().addClass(theme);
}
// Hide Rust code lines prepended with a specific character
var hiding_character = "#";
@ -193,7 +184,6 @@ $( document ).ready(function() {
});
});
// Process playpen code blocks
$(".playpen").each(function(block){
var pre_block = $(this);
@ -210,10 +200,8 @@ $( document ).ready(function() {
});
});
});
function run_rust_code(code_block) {
var result_block = code_block.find(".result");
if(result_block.length === 0) {