From 27721c26b58939733f5281b0632b2aad2b5e8dc7 Mon Sep 17 00:00:00 2001 From: Gambhiro Date: Wed, 18 Jan 2017 09:20:52 +0000 Subject: [PATCH] apply highlightjs style by class on body --- data/_html-template/_layouts/page.hbs | 9 +- data/_html-template/_stylus/book.styl | 2 + .../highlightjs-light.styl} | 79 ++++----- .../highlightjs-tomorrow-night.styl} | 62 +++---- data/_html-template/_stylus/highlightjs.styl | 7 + data/_html-template/css/book.css | 159 ++++++++++++++++++ data/_html-template/js/book.js | 26 +-- 7 files changed, 234 insertions(+), 110 deletions(-) rename data/_html-template/{css/highlight.css => _stylus/highlightjs-light.styl} (62%) rename data/_html-template/{css/tomorrow-night.css => _stylus/highlightjs-tomorrow-night.styl} (68%) create mode 100644 data/_html-template/_stylus/highlightjs.styl diff --git a/data/_html-template/_layouts/page.hbs b/data/_html-template/_layouts/page.hbs index db700877..d4b30941 100644 --- a/data/_html-template/_layouts/page.hbs +++ b/data/_html-template/_layouts/page.hbs @@ -11,18 +11,11 @@ - - - + - - - - - diff --git a/data/_html-template/_stylus/book.styl b/data/_html-template/_stylus/book.styl index c51497d0..c5068169 100644 --- a/data/_html-template/_stylus/book.styl +++ b/data/_html-template/_stylus/book.styl @@ -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' + diff --git a/data/_html-template/css/highlight.css b/data/_html-template/_stylus/highlightjs-light.styl similarity index 62% rename from data/_html-template/css/highlight.css rename to data/_html-template/_stylus/highlightjs-light.styl index 61681a2b..221f10bc 100644 --- a/data/_html-template/css/highlight.css +++ b/data/_html-template/_stylus/highlightjs-light.styl @@ -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; -} diff --git a/data/_html-template/css/tomorrow-night.css b/data/_html-template/_stylus/highlightjs-tomorrow-night.styl similarity index 68% rename from data/_html-template/css/tomorrow-night.css rename to data/_html-template/_stylus/highlightjs-tomorrow-night.styl index 9788e084..feae17a7 100644 --- a/data/_html-template/css/tomorrow-night.css +++ b/data/_html-template/_stylus/highlightjs-tomorrow-night.styl @@ -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 + diff --git a/data/_html-template/_stylus/highlightjs.styl b/data/_html-template/_stylus/highlightjs.styl new file mode 100644 index 00000000..f50e7032 --- /dev/null +++ b/data/_html-template/_stylus/highlightjs.styl @@ -0,0 +1,7 @@ +body.highlightjs-light { + @import 'highlightjs-light' +} + +body.highlightjs-dark { + @import 'highlightjs-tomorrow-night' +} \ No newline at end of file diff --git a/data/_html-template/css/book.css b/data/_html-template/css/book.css index d1a8f589..3129b114 100644 --- a/data/_html-template/css/book.css +++ b/data/_html-template/css/book.css @@ -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; diff --git a/data/_html-template/js/book.js b/data/_html-template/js/book.js index 281cfd76..c75d31da 100644 --- a/data/_html-template/js/book.js +++ b/data/_html-template/js/book.js @@ -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 = $(""); - 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($('
Coal
')) .append($('')); - 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) {