Unverified Commit 3bcc0c19 authored by Henk Verlinde's avatar Henk Verlinde Committed by GitHub
Browse files

Merge pull request #180 from h-enk/syntax-highlighting 

Add highlight.js as an option
parents 9e4a07a8 ae49b468

assets/js/highlight.js

0 → 100644
+24 −0
Original line number Diff line number Diff line 
import hljs from 'highlight.js/lib/core';



import javascript from 'highlight.js/lib/languages/javascript';

import json from 'highlight.js/lib/languages/json';

import bash from 'highlight.js/lib/languages/bash';

import htmlbars from 'highlight.js/lib/languages/htmlbars';

import ini from 'highlight.js/lib/languages/ini';

import yaml from 'highlight.js/lib/languages/yaml';

import markdown from 'highlight.js/lib/languages/markdown';



hljs.registerLanguage('javascript', javascript);

hljs.registerLanguage('json', json);

hljs.registerLanguage('bash', bash);

hljs.registerLanguage('html', htmlbars);

hljs.registerLanguage('ini', ini);

hljs.registerLanguage('toml', ini);

hljs.registerLanguage('yaml', yaml);

hljs.registerLanguage('md', markdown);



document.addEventListener('DOMContentLoaded', () => {

  document.querySelectorAll('pre code').forEach((block) => {

    hljs.highlightBlock(block);

  });

});

assets/scss/app.scss

+6 −2
Original line number Diff line number Diff line
@@ -7,14 +7,18 @@ 
/** Import Bootstrap */

@import "bootstrap/scss/bootstrap";



/** Import highlight.js */

// @import "highlight.js/scss/dracula";



/** Import theme styles */

@import "common/fonts";

@import "common/global";

@import "common/dark";

@import "components/doks";

// @import "components/syntax";

@import "components/code";

@import "components/alerts";

@import "components/buttons";

@import "components/code";

// @import "components/syntax";

@import "components/comments";

@import "components/forms";

@import "components/images";

assets/scss/common/_dark.scss

+11 −6
Original line number Diff line number Diff line
@@ -38,6 +38,16 @@ body.dark .btn-primary { 
  color: $body-bg-dark !important;

}



body.dark .btn-outline-primary {

  @include button-outline-variant($button-color-dark, $button-color-dark);



  color: $link-color-dark;

}



body.dark .btn-outline-primary:hover {

  color: $body-bg-dark;

}



body.dark .navbar {

  background: $body-bg-dark;

  opacity: 0.975;
@@ -178,12 +188,7 @@ body.dark ::selection { 
  background: $selection-color-dark;

}



body.dark pre {

  background: $body-overlay-dark;

  color: $body-color-dark;

}



body.dark code {

body.dark code:not(.hljs) {

  background: $body-overlay-dark;

  color: $body-color-dark;

}

assets/scss/components/_buttons.scss

+11 −1
Original line number Diff line number Diff line
@@ -55,9 +55,19 @@ body.dark .toggle-dark { 
}



@include media-breakpoint-up(md) {

  .doks-clipboard {

    position: relative;

    float: right;

  }



  .btn-clipboard {

    position: absolute;

    top: 1rem;

    right: 0.25rem;

    z-index: 10;

    display: block;

    margin: 2.0625rem 0.25rem -4rem auto;

    padding: 0.25rem 0.5rem;

    font-size: $font-size-sm;

  }

}

assets/scss/components/_code.scss

+17 −17
Original line number Diff line number Diff line
@@ -7,37 +7,37 @@ samp { 
  border-radius: $border-radius;

}



pre {

  background: $beige;

  color: $black;

  line-height: $line-height-base;

  margin: 2rem 0;

  overflow: auto;

  padding: 1.25rem 1.5rem;

  tab-size: 4;

}



code {

  background: $beige;

  color: $black;

  padding: 0.25rem 0.5rem;

}



pre {

  margin: 2rem 0;

}



pre code {

  background: none;

  font-size: inherit;

  padding: 0;

  display: block;

  overflow-x: auto;

  line-height: $line-height-base;

  padding: 1.25rem 1.5rem;

  tab-size: 4;

}



@include media-breakpoint-down(sm) {

  pre {

    margin: 2rem -1.5rem;

.hljs {

  padding: 1.25rem 1.5rem;

}



@include media-breakpoint-down(sm) {

  pre,

  code,

  kbd,

  samp {

    border-radius: 0;

  }



  pre {

    margin: 2rem -1.5rem;

  }

}