diff options
| -rw-r--r-- | post.html | 30 | ||||
| -rw-r--r-- | src/scss/custom/_hilite.scss | 52 | ||||
| -rw-r--r-- | src/scss/custom/_variables.scss | 2 |
3 files changed, 83 insertions, 1 deletions
@@ -103,6 +103,36 @@ <p>Lo siento, tu navegador no soporta vídeo en HTML5. Por favor, cambia o actualiza tu navegador web</p> </video> + <!-- code diff example with codehilite --> + <p>Ejemplo de código diff</p> + <table class="highlighttable"> + <tbody> + <tr> + <td class="linenos"> + <div class="linenodiv"><pre>1 +2 +3 +4 +5 +6 +7</pre></div> + </td> + <td class="code"> + <div class="highlight"> + <pre><span></span><span class="gd">--- script.sh 2018-03-16 15:52:49.887087539 -0300</span> +<span class="gi">+++ script.sh.new 2018-03-16 15:53:02.490420209 -0300</span> +<span class="gu">@@ -1,2 +1,3 @@</span> +<span class="gd">-#!/bin/bash</span> +<span class="gi">+#!/bin/sh</span> +echo "Hello world" +<span class="gi">+echo "This is a patched file :D"</span></pre> + </div> + </td> + </tr> + </tbody> + </table> + <!-- /end code diff example with codehilite --> + <div class="highlight"><pre><span></span><span class="o">#</span> <span class="n">rc</span><span class="o">-</span><span class="n">service</span> <span class="n">libvirtd</span> <span class="k">start</span></pre></div> <aside class="menu"> diff --git a/src/scss/custom/_hilite.scss b/src/scss/custom/_hilite.scss index a53a74f..69ec74b 100644 --- a/src/scss/custom/_hilite.scss +++ b/src/scss/custom/_hilite.scss @@ -1,8 +1,58 @@ /* Colors Code */ +.highlighttable { + pre { + background-color: #000; + color: #fff; + margin: 0px; + padding: 0px; + border: 0px; + background-size: 0px; + text-align: left; + direction: ltr; + tab-size: 2; + } + .linenodiv { + pre { + border-left: 10px solid $code; + border-top: 1px solid $code; + border-bottom: 1px solid $code; + padding-right: 10px; + padding-left: 5px; + font-size: $codefont; + } + box-shadow: inset -0.05rem 0 grey; + background-color: #000; + padding-right: 1px; + } + .highlight { + pre { + font-size: $codefont; + border-top: 1px solid $code; + border-bottom: 1px solid $code; + border-right: 1px solid $code; + } + } + .code { + padding: 0 0 0 0; + margin: 0px; + width: 100%; + pre { + padding-left: 10px; + padding-right: 20px; + } + } + .linenos { + padding: 0 0 0 0; + margin: 0px; + } + display: block; + overflow-x: auto; +} + .highlight { pre { - font-size: 75%; + font-size: $codefont; } .hll { background-color: #222222; diff --git a/src/scss/custom/_variables.scss b/src/scss/custom/_variables.scss index eee098c..be8442e 100644 --- a/src/scss/custom/_variables.scss +++ b/src/scss/custom/_variables.scss @@ -17,6 +17,8 @@ $footerheader: hsl(0, 0%, 4%); $boton: hsl(217, 71%, 53%); $hlinks: #ffc20e; $code: hsl(217, 71%, 53%); +$codefont: 75%; + $toc: hsl(217, 71%, 53%); // footer |