Skylighting Default Theme ( premature commit )

This is a premature commit of pandoc's default highlighter theme, for the purpose of sharing code example in a pandoc issue discussion --- jgm/pandoc#4128 Define skylighting default theme (Base16 Monokai, with extra colors). All SCSS readapted from pandoc v1 to v2.
tajmone · Dec 9, 2017 · 6bb2cbe · 6bb2cbe
1 parent 5e39eea
commit 6bb2cbe
Show file tree

Hide file tree

Showing 27 changed files with 2,715 additions and 99 deletions.
diff --git a/ALPHA-CHANGELOG.html b/ALPHA-CHANGELOG.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html class="no-js" lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="x-ua-compatible" content="ie=edge">
+		<title>Alpha Changelog</title>
+		<meta name="generator" content="pandoc">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<link rel="apple-touch-icon" href="apple-touch-icon.png">
+		<!-- Place favicon.ico in the root directory -->
+
+		<link rel="stylesheet" href="_assets/theme/css/styles.css">
+	</head>
+	<body>
+
+		<div id="container">
+			<div class="gidle-row">
+
+				<header id="siteheader"></header>
+				<nav id="breadcrumbs">
+
+<ol>
+	<li><a href='index.html'>Home</a></li>
+</ol>
+
+				</nav>
+				<div id="document">
+
+					<h1 class="title">Alpha Changelog</h1>
+
+<p>Temporary changelog for recording contents additions during the Alpha Test stage.</p>
+<div class="Note">
+<p><strong>NOTE</strong>: When the Alpha stage will be over, the project will be moved to The PueBASIC Arhives original repository, and all Alpha-Stage Git history will be lost.</p>
+</div>
+<ul>
+<li><code>2017/12/01</code>
+<ul>
+<li>New <a href="./pb-development/git/index.html"><code>/pb-development/git/</code></a> resources section.</li>
+</ul></li>
+</ul>
+				</div><!-- end document -->
+				<div id="sidebar">
+					<nav>
+					</nav>
+			 </div><!-- end sidebar -->
+
+			</div><!-- end row -->
+		</div><!-- end container -->
+
+	</body>
+</html>
diff --git a/_assets/theme/_sass/color-schemes/_base16-monokai.scss b/_assets/theme/_sass/color-schemes/_base16-monokai.scss
@@ -11,27 +11,35 @@
 // Chris Kempson's Base16 project (MIT License):
 // 
 //  -- https://github.com/chriskempson/base16-builder/blob/master/schemes/monokai.yml
+// 
+// A few extra colors added to the scheme.
 
 $chroma: define-color-scheme('b16-Monokai', 'Base16 "Monokai" scheme.');
 
 
 $chroma: add-colors('b16-Monokai', (
 	base00: #272822, // Rangoon Green ( almost black )
 	base01: #383830, // Armadillo ( almost black )
-	base02: #49483e, // Fuscous Gray ( blackboard-like brown )
-	base03: #75715e, // Crocodile
-	base04: #a59f85, // Tallow
-	base05: #f8f8f2, // Bianca
-	base06: #f5f4f1, // Pampas
-	base07: #f9f8f5, // Desert Storm
-	base08: #f92672, // Rose ( red )
-	base09: #fd971f, // West Side  ( intense orange )
-	base0A: #f4bf75, // Rajah  ( orange )
-	base0B: #a6e22e, // Inch Worm ( green )
-	base0C: #a1efe4, // Water Leaf ( cyan/turquoise )
-	base0D: #66d9ef, // Sky Blue
-	base0E: #ae81ff, // Lavender ( purple )
-	base0F: #cc6633, // Piper ( bick red )
+	base02: #49483E, // Fuscous Gray ( blackboard-like brown )
+	base03: #75715E, // Crocodile
+	base04: #A59F85, // Tallow
+	base05: #F8F8F2, // Bianca
+	base06: #F5F4F1, // Pampas
+	base07: #F9F8F5, // Desert Storm
+	base08: #F92672, // Rose ( red )
+	base09: #FD971F, // West Side  ( intense orange )
+	base0A: #F4BF75, // Rajah  ( orange )
+	base0B: #A6E22E, // Inch Worm ( green )
+	base0C: #A1EFE4, // Water Leaf ( cyan/turquoise )
+	base0D: #66D9EF, // Sky Blue
+	base0E: #AE81FF, // Lavender ( purple )
+	base0F: #CC6633, // Piper ( brick red )
+	// Extra colors:
+	base10: #FFE792, // Golden Glow ( yellow )
+	base11: #E6DB74, // Flax ( dull yellow )
+	base12: #1776BC, // Lochmara ( blue )
+	base13: #6298CD, // Danube ( dull blue )
+
 ));
 
 // ==============================================================================

diff --git a/_assets/theme/_sass/layout/_typography-code.scss b/_assets/theme/_sass/layout/_typography-code.scss
@@ -77,6 +77,9 @@ pre code {
 
 // The "small" class is used for code with lines exceeding 80 chars/cols
 // (can show up to 100 chars without horizontal scroll bar)
+pre.small,
+pre.small code,
+pre.small code.small,
 pre code.small {
   @include type-layout(s, 0.5); // Restore font-size and line-eigth values:
   letter-spacing: 0.075px;
@@ -117,6 +120,7 @@ border-radius: 4px;
 @include padding(0.5);
 }
 
+
 pre code {
 display: inline;
 max-width: auto;
@@ -136,19 +140,5 @@ color: red;
 //                              Pandoc's Skylighting                             
 // ==============================================================================
 // Style settings specific to Pandoc's built in syntax-highlighter (skylighting)
-
-// ------------------------------------------------------------------------------
-//                             Code With Line-Numbers                            
-// ------------------------------------------------------------------------------
-// Fix Skylighting's table radius borders between the line-nums column and the
-// sourcecode column...
-td.lineNumbers pre {
-  border-top-right-radius: 0;   
-  border-bottom-right-radius: 0;
-  background-color: rgba(153, 153, 153, 0.5); // FIXME (darker color for BG)
-}
-
-td.sourceCode pre {
-  border-top-left-radius: 0;   
-  border-bottom-left-radius: 0;
-}
+// are handled in the default pandoc theme:
+//   "/syntax-highlighting/_skylighting-default.scss"
diff --git a/_assets/theme/_sass/styles.scss b/_assets/theme/_sass/styles.scss
@@ -153,8 +153,11 @@ $fa-line-height-base: 	$base-line-height;
 // Syntax highlighting color schemes for code highlighted with either pandoc's
 // internal highlighter (skylighting) or André Simon's Highlight tool.
 
-@import 'syntax-highlighting/purebasic'; // PureBASIC (Highlight)
-@import 'syntax-highlighting/fasm'; 	 // Fasm      (Highlight)
+
+@import 'syntax-highlighting/highlight-purebasic'; // PureBASIC       (Highlight)
+@import 'syntax-highlighting/highlight-fasm'; 	   // Fasm            (Highlight)
+
+@import 'syntax-highlighting/_skylighting-default'; // default      (skylighting)
 
 // ------------------------------------------------------------------------------
 //                                  Code Classes                                 

diff --git a/_assets/theme/_sass/syntax-highlighting/___skylighting-template.scss b/_assets/theme/_sass/syntax-highlighting/___skylighting-template.scss
@@ -1,68 +1,101 @@
-// taken from the "Pandoc-Goodies" project:
-// https://github.com/tajmone/pandoc-goodies
-// https://github.com/tajmone/pandoc-goodies/blob/master/skylighting-css/sass-templates/bare-bones.scss
 /*
-	==============================================================================
-	                     Bare-Bones Pandoc Highlighting Theme                     
-	==============================================================================
-	"bare-bones.scss" v1.0 (2017-07-11) by Tristano Ajmone.
+    ==============================================================================
+                         Bare-Bones Pandoc Highlighting Theme                     
+    ==============================================================================
+    "bare-bones.scss" v2.0 (2017-11-16) | pandoc v2.0.2 | by Tristano Ajmone
 
-	This Sass template emulates the definitions and structure of pandoc's built-in
-	CSS styles (skylighting themes for syntax highlighting).
-	
-	All possible syntax tokens are covered.
-	
-	Use it as a starting point for your custom themes: adjust it to your needs and
-	delete tokens that don't apply to the language/syntax you're targeting.
+    This Sass template emulates the definitions and structure of pandoc's (v2.x)
+    built-in CSS styles (skylighting themes for syntax highlighting).
+    
+    All possible syntax tokens are covered.
+    
+    Use it as a starting point for your custom themes: adjust it to your needs and
+    delete tokens that don't apply to the language/syntax you're targeting.
 
-	Released into the public domain according to the Unlicense terms:
+    Released into the public domain according to the Unlicense terms:
 
-		http://unlicense.org/
-	
-	Credits and mentioning are not mandatory -- but they'd be highly appreciated!
-	------------------------------------------------------------------------------
+        http://unlicense.org/
+    
+    Credits and mentioning are not mandatory -- but they'd be highly appreciated!
+    ------------------------------------------------------------------------------
 */
-div.sourceCode {
-	overflow-x: auto;
+div.sourceLine,
+a.sourceLine {
+	display: inline-block;
+	min-height: 1.25em;
+}
+
+a.sourceLine {
+	pointer-events: none;
+	color: inherit;
+	text-decoration: inherit;
+}
+
+.sourceCode {
+	overflow: visible;
+}
+
+code.sourceCode {
+	white-space: pre;
 }
 
-table.sourceCode,
-tr.sourceCode,
-td.lineNumbers,
-td.sourceCode {
-	margin: 0;
-	padding: 0;
+@media print {
+	code.sourceCode {
+		white-space: pre-wrap;
+	}
+
+	div.sourceLine, a.sourceLine {
+		text-indent: -1em;
+		padding-left: 1em;
+	}
+}
+
+pre.numberSource div.sourceLine,
+.numberSource a.sourceLine {
+	position: relative;
+}
+
+pre.numberSource div.sourceLine::before,
+.numberSource a.sourceLine::before {
+	content: attr(data-line-number);
+	position: absolute;
+	left: -5em;
+	text-align: right;
 	vertical-align: baseline;
 	border: none;
+	pointer-events: all;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	padding: 0 4px;
+	width: 4em;
 }
 
-pre,
-code,
-table.sourceCode {
-	background-color: #dddddd;
-	color: #000000;
+pre.numberSource {
+	margin-left: 3em;
+	border-left: 1px solid #bdae9d;
+	background-color: #2a211c;
+	color: #bdae9d;
+	padding-left: 4px;
 }
 
-table.sourceCode {
-	width: 100%;
-	line-height: 100%;
+pre, code {
+	color: #bdae9d;
+	background-color: #2a211c;
 }
 
-td {
-	&.lineNumbers {
-		text-align: right;
-		padding-right: 4px;
-		padding-left: 4px;
-		color: #aaaaaa;
-		border-right: 1px solid #aaaaaa;
-	}
-	&.sourceCode {
-		padding-left: 5px;
+@media screen {
+	a.sourceLine::before {
+		text-decoration: underline;
+		color: initial;
 	}
 }
 
 code {
-	& > span {
+	& span {
 		&.al { /* Alert */
 			color: #000000;
 		}
@@ -78,7 +111,7 @@ code {
 		&.bu { /* BuiltIn */
 			color: #000000;
 		}
-		&.cf { /* Control Flow */
+		&.cf { /* ControlFlow */
 			color: #000000;
 		}
 		&.ch { /* Char */
@@ -90,7 +123,7 @@ code {
 		&.co { /* Comment */
 			color: #000000;
 		}
-		&.cv { /* Comment Var */
+		&.cv { /* CommentVar */
 			color: #000000;
 		}
 		&.do { /* Documentation */
@@ -132,13 +165,13 @@ code {
 		&.pp { /* Preprocessor */
 			color: #000000;
 		}
-		&.re { /* Region Marker */
+		&.re { /* RegionMarker */
 			color: #000000;
 		}
-		&.sc { /* Special Char */
+		&.sc { /* SpecialChar */
 			color: #000000;
 		}
-		&.ss { /* Special String */
+		&.ss { /* SpecialString */
 			color: #000000;
 		}
 		&.st { /* String */
@@ -147,7 +180,7 @@ code {
 		&.va { /* Variable */
 			color: #000000;
 		}
-		&.vs { /* Verbatim String */
+		&.vs { /* VerbatimString */
 			color: #000000;
 		}
 		&.wa { /* Warning */

diff --git a/...heme/_sass/syntax-highlighting/_fasm.scss → .../syntax-highlighting/_highlight-fasm.scss b/...heme/_sass/syntax-highlighting/_fasm.scss → .../syntax-highlighting/_highlight-fasm.scss
diff --git a/..._sass/syntax-highlighting/_purebasic.scss → ...ax-highlighting/_highlight-purebasic.scss b/..._sass/syntax-highlighting/_purebasic.scss → ...ax-highlighting/_highlight-purebasic.scss