apply highlightjs style by class on body
This commit is contained in:
Gambhiro
parent
eb5a9b987f
commit
27721c26b5
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
body.highlightjs-light {
|
||||
@import 'highlightjs-light'
|
||||
}
|
||||
|
||||
body.highlightjs-dark {
|
||||
@import 'highlightjs-tomorrow-night'
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ $( 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) {
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue