Mejor soporte para los colores, agregado prism por npm y modificado levemente el tema one dark por sass

package-lock.json

@@ -1991,6 +1991,17 @@
                 }
             }
         },
+        "clipboard": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
+            "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+            "optional": true,
+            "requires": {
+                "good-listener": "^1.2.2",
+                "select": "^1.1.2",
+                "tiny-emitter": "^2.0.0"
+            }
+        },
         "cliui": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@@ -2821,6 +2832,12 @@
                 }
             }
         },
+        "delegate": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+            "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+            "optional": true
+        },
         "depd": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -4419,6 +4436,15 @@
                 "glob": "^7.1.1"
             }
         },
+        "good-listener": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+            "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+            "optional": true,
+            "requires": {
+                "delegate": "^3.1.2"
+            }
+        },
         "graceful-fs": {
             "version": "4.2.2",
             "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz",
@@ -10172,6 +10198,19 @@
             "integrity": "sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==",
             "dev": true
         },
+        "prism-themes": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/prism-themes/-/prism-themes-1.2.0.tgz",
+            "integrity": "sha512-Y+xZs8u++9IHPZOIaeQ6itdTuDMNcGv0tMIO8MA6AlV9ZocdBvhy1JU6SE/Yzg+8RwSvWLYDQx85ardSKxo/9g=="
+        },
+        "prismjs": {
+            "version": "1.17.1",
+            "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz",
+            "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==",
+            "requires": {
+                "clipboard": "^2.0.0"
+            }
+        },
         "private": {
             "version": "0.1.8",
             "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -10747,6 +10786,12 @@
                 "ajv-keywords": "^3.1.0"
             }
         },
+        "select": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+            "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+            "optional": true
+        },
         "select-hose": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -11621,6 +11666,12 @@
             "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
             "dev": true
         },
+        "tiny-emitter": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+            "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+            "optional": true
+        },
         "to-arraybuffer": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",

package.json

@@ -20,6 +20,8 @@
     "dependencies": {
         "normalize.css": "^8.0.1",
         "npm": "^6.11.2",
+        "prism-themes": "^1.2.0",
+        "prismjs": "^1.17.1",
         "purecss": "^1.0.1",
         "skeleton-scss": "^2.0.4"
     }

public/css/app.css

@@ -1594,6 +1594,7 @@ time {
   padding-bottom: 2ch;
   box-shadow: 0px 3px 5px 0px #ccc;
   background-color: #fdfcfc;
+  z-index: 1;
 }
 
 .menu-list {

public/css/prism.css

@@ -1,22 +1,19 @@
-/* PrismJS 1.17.1
-https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+antlr4+apacheconf+apl+applescript+aql+c+arff+asciidoc+asm6502+csharp+autohotkey+autoit+bash+basic+batch+bison+bnf+brainfuck+bro+cpp+aspnet+arduino+cil+coffeescript+cmake+clojure+ruby+csp+css-extras+d+dart+diff+markup-templating+dns-zone-file+docker+ebnf+eiffel+ejs+elixir+elm+lua+erb+erlang+fsharp+firestore-security-rules+flow+fortran+ftl+gcode+gdscript+gedcom+gherkin+git+glsl+gml+go+graphql+groovy+less+handlebars+haskell+haxe+hcl+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+scala+php+javastacktrace+jolie+jq+javadoclike+n4js+markdown+json+jsonp+json5+julia+keyman+kotlin+latex+crystal+scheme+liquid+lisp+livescript+lolcode+etlua+makefile+js-templates+django+matlab+mel+mizar+monkey+n1ql+typescript+nand2tetris-hdl+nasm+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+pascaligo+pcaxis+perl+jsdoc+phpdoc+php-extras+sql+powershell+processing+prolog+properties+protobuf+scss+puppet+pure+python+q+qore+r+js-extras+jsx+renpy+reason+vala+rest+rip+roboconf+robot-framework+textile+rust+sas+sass+stylus+javadoc+lilypond+shell-session+smalltalk+smarty+solidity+soy+turtle+splunk-spl+sqf+plsql+twig+swift+yaml+tcl+haml+toml+tt2+sparql+pug+tsx+t4-templating+visual-basic+t4-cs+regex+vbnet+velocity+verilog+vhdl+vim+t4-vb+wasm+wiki+xeora+xojo+xquery+tap+zig */
 /**
- * prism.js Twilight theme
+ * atom-dark theme for `prism.js`
- * Based (more or less) on the Twilight theme originally of Textmate fame.
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
- * @author Remy Bach
+ * @author Joe Gibson (@gibsjose)
  */
+
 code[class*="language-"],
 pre[class*="language-"] {
-	color: white;
+	color: #c5c8c6;
-	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
-	font-size: 1em;
+	direction: ltr;
 	text-align: left;
-	text-shadow: 0 -.1em .2em black;
 	white-space: pre;
 	word-spacing: normal;
 	word-break: normal;
-	word-wrap: normal;
 	line-height: 1.5;
 
 	-moz-tab-size: 4;
@@ -24,110 +21,115 @@ pre[class*="language-"] {
 	tab-size: 4;
 
 	-webkit-hyphens: none;
-	-moz-hyphens: none;
 	-ms-hyphens: none;
 	hyphens: none;
 }
 
-pre[class*="language-"],
-:not(pre) > code[class*="language-"] {
-	background: hsl(0, 0%, 8%); /* #141414 */
-}
-
 /* Code blocks */
 pre[class*="language-"] {
-	border-radius: .5em;
+	padding: 1em;
-	border: .3em solid hsl(0, 0%, 33%); /* #282A2B */
-	box-shadow: 1px 1px .5em black inset;
 	margin: .5em 0;
 	overflow: auto;
-	padding: 1em;
+	border-radius: 0.3em;
 }
 
-pre[class*="language-"]::-moz-selection {
+:not(pre) > code[class*="language-"],
-	/* Firefox */
+pre[class*="language-"] {
-	background: hsl(200, 4%, 16%); /* #282A2B */
+	background: #1d1f21;
-}
-
-pre[class*="language-"]::selection {
-	/* Safari */
-	background: hsl(200, 4%, 16%); /* #282A2B */
-}
-
-/* Text Selection colour */
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-	text-shadow: none;
-	background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-	text-shadow: none;
-	background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
+	padding: .1em;
 	border-radius: .3em;
-	border: .13em solid hsl(0, 0%, 33%); /* #545454 */
-	box-shadow: 1px 1px .3em -.1em black inset;
-	padding: .15em .2em .05em;
-	white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-	color: hsl(0, 0%, 47%); /* #777777 */
+	color: #7C7C7C;
 }
 
 .token.punctuation {
-	opacity: .7;
+	color: #c5c8c6;
 }
 
 .namespace {
 	opacity: .7;
 }
 
-.token.tag,
-.token.boolean,
-.token.number,
-.token.deleted {
-	color: hsl(14, 58%, 55%); /* #CF6A4C */
-}
-
-.token.keyword,
 .token.property,
-.token.selector,
+.token.keyword,
-.token.constant,
+.token.tag {
-.token.symbol,
+	color: #96CBFE;
-.token.builtin {
-	color: hsl(53, 89%, 79%); /* #F9EE98 */
 }
 
+.token.class-name {
+	color: #FFFFB6;
+	text-decoration: underline;
+}
+
+.token.boolean,
+.token.constant {
+	color: #99CC99;
+}
+
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.number {
+	color: #FF73FD;
+}
+
+.token.selector,
 .token.attr-name,
-.token.attr-value,
 .token.string,
 .token.char,
-.token.operator,
+.token.builtin,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string,
-.token.variable,
 .token.inserted {
-	color: hsl(76, 21%, 52%); /* #8F9D6A */
+	color: #A8FF60;
 }
 
-.token.atrule {
+.token.variable {
-	color: hsl(218, 22%, 55%); /* #7587A6 */
+	color: #C6C5FE;
+}
+
+.token.operator {
+	color: #EDEDED;
+}
+
+.token.entity {
+	color: #FFFFB6;
+	/* text-decoration: underline; */
+}
+
+.token.url {
+	color: #96CBFE;
+}
+
+.language-css .token.string,
+.style .token.string {
+	color: #87C38A;
+}
+
+.token.atrule,
+.token.attr-value {
+	color: #F9EE98;
+}
+
+.token.function {
+	color: #DAD085;
+}
+
+.token.regex {
+	color: #E9C062;
 }
 
-.token.regex,
 .token.important {
-	color: hsl(42, 75%, 65%); /* #E9C062 */
+	color: #fd971f;
 }
 
 .token.important,
@@ -141,62 +143,15 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection {
 .token.entity {
 	cursor: help;
 }
-
+pre[class*=language-] {
-pre[data-line] {
+  border-radius: 5px;
-	padding: 1em 0 1em 3em;
+  border: none;
-	position: relative;
 }
 
-/* Markup */
+code[class*=language-],
-.language-markup .token.tag,
+pre[class*=language-] {
-.language-markup .token.attr-name,
+  font-family: monospace;
-.language-markup .token.punctuation {
+  font-size: 1.1em;
-	color: hsl(33, 33%, 52%); /* #AC885B */
+  line-height: 1.2em;
-}
-
-/* Make the tokens sit above the line highlight so the colours don't look faded. */
-.token {
-	position: relative;
-	z-index: 1;
-}
-
-.line-highlight {
-	background: hsla(0, 0%, 33%, 0.25); /* #545454 */
-	background: linear-gradient(to right, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
-	border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */
-	border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */
-	left: 0;
-	line-height: inherit;
-	margin-top: 0.75em; /* Same as .prism’s padding-top */
-	padding: inherit 0;
-	pointer-events: none;
-	position: absolute;
-	right: 0;
-	white-space: pre;
-	z-index: 0;
-}
-
-.line-highlight:before,
-.line-highlight[data-end]:after {
-	background-color: hsl(215, 15%, 59%); /* #8794A6 */
-	border-radius: 999px;
-	box-shadow: 0 1px white;
-	color: hsl(24, 20%, 95%); /* #F5F2F0 */
-	content: attr(data-start);
-	font: bold 65%/1.5 sans-serif;
-	left: .6em;
-	min-width: 1em;
-	padding: 0 .5em;
-	position: absolute;
-	text-align: center;
-	text-shadow: none;
-	top: .4em;
-	vertical-align: .3em;
-}
-
-.line-highlight[data-end]:after {
-	bottom: .4em;
-	content: attr(data-end);
-	top: auto;
 }
 

public/js/app.js

@@ -117,15 +117,27 @@ for (i = 0; i < images.length; i++) {
 
 /***/ }),
 
+/***/ "./resources/sass/prism-theme.scss":
+/*!*****************************************!*\
+  !*** ./resources/sass/prism-theme.scss ***!
+  \*****************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+
+/***/ }),
+
 /***/ 0:
-/*!*************************************************************!*\
+/*!***********************************************************************************************!*\
-  !*** multi ./resources/js/app.js ./resources/sass/app.scss ***!
+  !*** multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/prism-theme.scss ***!
-  \*************************************************************/
+  \***********************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(/*! /home/data/src/www.danielcortes.xyz/resources/js/app.js */"./resources/js/app.js");
-module.exports = __webpack_require__(/*! /home/data/src/www.danielcortes.xyz/resources/sass/app.scss */"./resources/sass/app.scss");
+__webpack_require__(/*! /home/data/src/www.danielcortes.xyz/resources/sass/app.scss */"./resources/sass/app.scss");
+module.exports = __webpack_require__(/*! /home/data/src/www.danielcortes.xyz/resources/sass/prism-theme.scss */"./resources/sass/prism-theme.scss");
 
 
 /***/ })

resources/css/prism-ghcolors.css

@@ -1,119 +0,0 @@
-/**
- * GHColors theme by Avi Aryan (http://aviaryan.in)
- * Inspired by Github syntax coloring
- */
-
-code[class*="language-"],
-pre[class*="language-"] {
-	color: #393A34;
-	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
-	direction: ltr;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	font-size: .9em;
-	line-height: 1.2em;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-}
-
-pre > code[class*="language-"] {
-	font-size: 1em;
-}
-
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-	background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-	background: #b3d4fc;
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-	padding: 1em;
-	margin: .5em 0;
-	overflow: auto;
-	border: 1px solid #dddddd;
-	background-color: white;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-	padding: .2em;
-	padding-top: 1px; padding-bottom: 1px;
-	background: #f8f8f8;
-	border: 1px solid #dddddd;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-	color: #999988; font-style: italic;
-}
-
-.token.namespace {
-	opacity: .7;
-}
-
-.token.string,
-.token.attr-value {
-	color: #e3116c;
-}
-.token.punctuation,
-.token.operator {
-	color: #393A34; /* no highlight */
-}
-
-.token.entity,
-.token.url,
-.token.symbol,
-.token.number,
-.token.boolean,
-.token.variable,
-.token.constant,
-.token.property,
-.token.regex,
-.token.inserted {
-	color: #36acaa;
-}
-
-.token.atrule,
-.token.keyword,
-.token.attr-name,
-.language-autohotkey .token.selector {
-	color: #00a4db;
-}
-
-.token.function,
-.token.deleted,
-.language-autohotkey .token.tag {
-	color: #9a050f;
-}
-
-.token.tag,
-.token.selector,
-.language-autohotkey .token.keyword {
-	color: #00009f;
-}
-
-.token.important,
-.token.function,
-.token.bold {
-	font-weight: bold;
-}
-
-.token.italic {
-	font-style: italic;
-}

resources/css/prism-twilight.css

@@ -1,202 +0,0 @@
-/* PrismJS 1.17.1
-https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+antlr4+apacheconf+apl+applescript+aql+c+arff+asciidoc+asm6502+csharp+autohotkey+autoit+bash+basic+batch+bison+bnf+brainfuck+bro+cpp+aspnet+arduino+cil+coffeescript+cmake+clojure+ruby+csp+css-extras+d+dart+diff+markup-templating+dns-zone-file+docker+ebnf+eiffel+ejs+elixir+elm+lua+erb+erlang+fsharp+firestore-security-rules+flow+fortran+ftl+gcode+gdscript+gedcom+gherkin+git+glsl+gml+go+graphql+groovy+less+handlebars+haskell+haxe+hcl+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+scala+php+javastacktrace+jolie+jq+javadoclike+n4js+markdown+json+jsonp+json5+julia+keyman+kotlin+latex+crystal+scheme+liquid+lisp+livescript+lolcode+etlua+makefile+js-templates+django+matlab+mel+mizar+monkey+n1ql+typescript+nand2tetris-hdl+nasm+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+pascaligo+pcaxis+perl+jsdoc+phpdoc+php-extras+sql+powershell+processing+prolog+properties+protobuf+scss+puppet+pure+python+q+qore+r+js-extras+jsx+renpy+reason+vala+rest+rip+roboconf+robot-framework+textile+rust+sas+sass+stylus+javadoc+lilypond+shell-session+smalltalk+smarty+solidity+soy+turtle+splunk-spl+sqf+plsql+twig+swift+yaml+tcl+haml+toml+tt2+sparql+pug+tsx+t4-templating+visual-basic+t4-cs+regex+vbnet+velocity+verilog+vhdl+vim+t4-vb+wasm+wiki+xeora+xojo+xquery+tap+zig */
-/**
- * prism.js Twilight theme
- * Based (more or less) on the Twilight theme originally of Textmate fame.
- * @author Remy Bach
- */
-code[class*="language-"],
-pre[class*="language-"] {
-	color: white;
-	background: none;
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-	font-size: 1em;
-	text-align: left;
-	text-shadow: 0 -.1em .2em black;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	line-height: 1.5;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-}
-
-pre[class*="language-"],
-:not(pre) > code[class*="language-"] {
-	background: hsl(0, 0%, 8%); /* #141414 */
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-	border-radius: .5em;
-	border: .3em solid hsl(0, 0%, 33%); /* #282A2B */
-	box-shadow: 1px 1px .5em black inset;
-	margin: .5em 0;
-	overflow: auto;
-	padding: 1em;
-}
-
-pre[class*="language-"]::-moz-selection {
-	/* Firefox */
-	background: hsl(200, 4%, 16%); /* #282A2B */
-}
-
-pre[class*="language-"]::selection {
-	/* Safari */
-	background: hsl(200, 4%, 16%); /* #282A2B */
-}
-
-/* Text Selection colour */
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-	text-shadow: none;
-	background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-	text-shadow: none;
-	background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-	border-radius: .3em;
-	border: .13em solid hsl(0, 0%, 33%); /* #545454 */
-	box-shadow: 1px 1px .3em -.1em black inset;
-	padding: .15em .2em .05em;
-	white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-	color: hsl(0, 0%, 47%); /* #777777 */
-}
-
-.token.punctuation {
-	opacity: .7;
-}
-
-.namespace {
-	opacity: .7;
-}
-
-.token.tag,
-.token.boolean,
-.token.number,
-.token.deleted {
-	color: hsl(14, 58%, 55%); /* #CF6A4C */
-}
-
-.token.keyword,
-.token.property,
-.token.selector,
-.token.constant,
-.token.symbol,
-.token.builtin {
-	color: hsl(53, 89%, 79%); /* #F9EE98 */
-}
-
-.token.attr-name,
-.token.attr-value,
-.token.string,
-.token.char,
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string,
-.token.variable,
-.token.inserted {
-	color: hsl(76, 21%, 52%); /* #8F9D6A */
-}
-
-.token.atrule {
-	color: hsl(218, 22%, 55%); /* #7587A6 */
-}
-
-.token.regex,
-.token.important {
-	color: hsl(42, 75%, 65%); /* #E9C062 */
-}
-
-.token.important,
-.token.bold {
-	font-weight: bold;
-}
-.token.italic {
-	font-style: italic;
-}
-
-.token.entity {
-	cursor: help;
-}
-
-pre[data-line] {
-	padding: 1em 0 1em 3em;
-	position: relative;
-}
-
-/* Markup */
-.language-markup .token.tag,
-.language-markup .token.attr-name,
-.language-markup .token.punctuation {
-	color: hsl(33, 33%, 52%); /* #AC885B */
-}
-
-/* Make the tokens sit above the line highlight so the colours don't look faded. */
-.token {
-	position: relative;
-	z-index: 1;
-}
-
-.line-highlight {
-	background: hsla(0, 0%, 33%, 0.25); /* #545454 */
-	background: linear-gradient(to right, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
-	border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */
-	border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */
-	left: 0;
-	line-height: inherit;
-	margin-top: 0.75em; /* Same as .prism’s padding-top */
-	padding: inherit 0;
-	pointer-events: none;
-	position: absolute;
-	right: 0;
-	white-space: pre;
-	z-index: 0;
-}
-
-.line-highlight:before,
-.line-highlight[data-end]:after {
-	background-color: hsl(215, 15%, 59%); /* #8794A6 */
-	border-radius: 999px;
-	box-shadow: 0 1px white;
-	color: hsl(24, 20%, 95%); /* #F5F2F0 */
-	content: attr(data-start);
-	font: bold 65%/1.5 sans-serif;
-	left: .6em;
-	min-width: 1em;
-	padding: 0 .5em;
-	position: absolute;
-	text-align: center;
-	text-shadow: none;
-	top: .4em;
-	vertical-align: .3em;
-}
-
-.line-highlight[data-end]:after {
-	bottom: .4em;
-	content: attr(data-end);
-	top: auto;
-}
-

resources/sass/_colors.scss

@@ -0,0 +1,7 @@
+/******************************************************************************
+    => Color definitions
+*******************************************************************************/
+$background-color: hsl(10, 20%, 99%);
+$foreground-color: hsl(10, 10%, 13%);
+$primary-color   : #0fa0ce; 
+$admin-color     : #ee1155;

resources/sass/app.scss

@@ -1,11 +1,5 @@
 @import "~purecss/build/pure.css";
-/******************************************************************************
+@import "colors.scss";
-    => Color definitions
-*******************************************************************************/
-$background-color: hsl(10, 20%, 99%);
-$foreground-color: hsl(10, 10%, 13%);
-$primary-color   : #0fa0ce; 
-$admin-color     : #ee1155;
 
 
 /******************************************************************************
@@ -113,6 +107,7 @@ time {
     padding-bottom: 2ch;
     box-shadow: 0px 3px 5px 0px #ccc;
     background-color: $background-color;
+    z-index: 1;
 }
 
 .menu-list {

resources/sass/prism-theme.scss

@@ -0,0 +1,14 @@
+@import "~prism-themes/themes/prism-atom-dark.css";
+
+pre[class*="language-"] {
+    border-radius: 5px;
+    border: none;
+}
+
+code[class*="language-"], pre[class*="language-"] {
+    font-family: monospace;
+    font-size: 1.1em;
+    line-height: 1.2em;
+}
+
+

webpack.mix.js

@@ -16,5 +16,5 @@ mix.js('resources/js/app.js', 'public/js')
     .js('resources/js/admin.js', 'public/js')
     .js('resources/js/prism.js', 'public/js')
     .sass('resources/sass/app.scss', 'public/css')
-    .styles(['resources/css/prism-ghcolors.css'], 'public/css/prism.css')
+    .sass('resources/sass/prism-theme.scss', 'public/css/prism.css')
     .copyDirectory('resources/fonts', 'public/fonts');