Commit 5180bd53 authored by Henk Verlinde's avatar Henk Verlinde
Browse files

feat: add highlight.js as an option

parent 47ca1a22

assets/js/highlight.js

0 → 100644
+22 −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';



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);



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

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

    hljs.highlightBlock(block);

  });

});

assets/scss/app.scss

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

@import "bootstrap/scss/bootstrap";



/** Import highlight.js */

@import "highlight.js/scss/gradient-dark";



/** Import theme styles */

@import "common/fonts";

@import "common/global";

@import "common/dark";

@import "components/alerts";

@import "components/buttons";

@import "components/code";

// @import "components/syntax";

@import "components/alerts";

@import "components/buttons";

@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/common/_variables.scss

+1 −0
Original line number Diff line number Diff line
@@ -110,6 +110,7 @@ $font-size-xl: $font-size-base * 1.375; 
$font-size-lg:                $font-size-base * 1.25;

$font-size-md:                $font-size-base * 1.125;

$font-size-sm:                $font-size-base * 0.875;

$font-size-xs:                $font-size-base * 0.625;



$line-height-base:            1.5;

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: 2.125rem;

    right: 1rem;

    z-index: 10;

    display: block;

    margin: 2.0625rem 0.25rem -4rem auto;

    padding: 0.25rem 0.5rem;

    font-size: $font-size-xs;

  }

}