refine markdownit

Gruntfile.js

@@ -42,7 +42,7 @@ module.exports = function(grunt) {
         },
 
         watch: {
-            files: ['<%= jshint.files %>', 'viki.html'],
+            files: ['<%= jshint.files %>', 'viki.html', 'css/*'],
             tasks: ['default']
         },
 
@@ -93,6 +93,7 @@ module.exports = function(grunt) {
             post: {
                 files: [
                     { expand: true, src: 'viki.html', dest: 'dist/'},
+                    { expand: true, src: 'css/*', dest: 'dist/'},
                 ],
             },
         },

css/highlightjs.css

@@ -0,0 +1,99 @@
+/*
+
+Original highlight.js style (c) Ivan Sagalaev <[email protected]>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #E0E0E0;
+}
+
+
+/* Base color: saturation 0; */
+
+.hljs,
+.hljs-subst {
+  color: #363636;
+}
+
+.hljs-comment {
+  color: #767676;
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+  color: #0000ee;
+}
+
+
+/* User color: hue: 0 */
+
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: #880000;
+}
+
+.hljs-title,
+.hljs-section {
+  color: #880000;
+  font-weight: bold;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #BC6060;
+}
+
+
+/* Language color: hue: 90; */
+
+.hljs-literal {
+  color: #af00d7;
+}
+
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #008700;
+}
+
+
+/* Meta color: hue: 200 */
+
+.hljs-meta {
+  color: #1f7199;
+}
+
+.hljs-meta-string {
+  color: #4d99bf;
+}
+
+
+/* Misc effects */
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

css/viki.css

@@ -0,0 +1,160 @@
+.viki-img-package {
+    text-align: center;
+}
+
+img.viki-img-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+span.viki-img-caption {
+    min-width: 20%;
+    max-width: 80%;
+    display: inline-block;
+    padding: 10px;
+    margin: 0 auto;
+    border-bottom: 1px solid #c0c0c0;
+    color: #6c6c6c;
+    text-align: center;
+    line-height: 1.5;
+}
+
+/* View Image */
+.viki-view-image,.viki-view-svg {
+    transition: 0.3s;
+}
+
+.viki-modal-box {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    padding-top: 50px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: rgb(68, 68, 68);
+    background-color: rgba(68, 68, 68, 0.95);
+    z-index: 2000;
+}
+
+.viki-modal-content {
+    margin: auto;
+    display: block;
+    width: auto;
+    height: auto;
+    cursor: move;
+}
+
+/* Add Animation */
+.viki-modal-content {
+    -webkit-animation-name: zoom;
+    -webkit-animation-duration: 0.6s;
+    animation-name: zoom;
+    animation-duration: 0.6s;
+}
+
+@-webkit-keyframes zoom {
+    from {-webkit-transform:scale(0)}
+    to {-webkit-transform:scale(1)}
+}
+
+@keyframes zoom {
+    from {transform:scale(0)}
+    to {transform:scale(1)}
+}
+
+/* The Close Button */
+span.viki-modal-close {
+    position: absolute;
+    z-index: 1000;
+    top: 15px;
+    right: 35px;
+    color: #DADADA;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+span.viki-modal-close:hover,
+span.viki-modal-close:focus {
+    color: #EEEEEE;
+    text-decoration: none;
+    cursor: pointer;
+}
+/* View Image */
+
+pre code.viki-markdown-metadata {
+    border-left: .5rem solid #80CBC4;
+}
+
+div.viki-mermaid-diagram {
+    margin: 16px 0px 16px 0px;
+    overflow-y: hidden;
+}
+
+div.viki-flowchart-diagram {
+    padding: 0px 5px 0px 5px;
+    margin: 16px 0px 16px 0px;
+    width: fit-content;
+    overflow: hidden;
+}
+
+div.viki-plantuml-diagram {
+    padding: 5px 5px 0px 5px;
+    margin: 16px 0px 16px 0px;
+    width: fit-content;
+    overflow: hidden;
+}
+
+/* For Highlight.js Line Number */
+table.hljs-ln tr {
+    border: none;
+    background-color: transparent;
+}
+
+table.hljs-ln tr td {
+    border: none;
+    background-color: transparent;
+}
+
+table.hljs-ln tr td.hljs-ln-numbers {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    text-align: center;
+    color: #AAA;
+    border-right: 1px solid #CCC;
+    vertical-align: top;
+    padding-right: 5px;
+    white-space: nowrap;
+}
+
+table.hljs-ln tr td.hljs-ln-code {
+    padding-left: 10px;
+}
+/* For Highlight.js Line Number */
+
+/* Mathjax */
+x-eqs {
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+    align-items: center;
+}
+
+x-eqs > x-eqn {
+    width: 100%;
+    margin-left: 3rem;
+}
+
+x-eqs > span {
+    text-align:right;
+}
+/* Mathjax */

js/configworker.js

@@ -9,7 +9,11 @@ class Config {
             breaks: false,
             linkify: true,
             typographer: false,
-            langPrefix: 'lang-'
+            langPrefix: 'lang-',
+            imageCaption: true,
+            plantUMLServer: 'http://www.plantuml.com/plantuml',
+            plantUMLFormat: 'svg',
+            codeBlockLineNumber: false
         };
     }
 
@@ -39,6 +43,22 @@ class Config {
             if (md.langPrefix) {
                 this.markdown.langPrefix = md.langPrefix;
             }
+
+            if (md.imageCaption) {
+                this.markdown.imageCaption = md.imageCaption;
+            }
+
+            if (md.plantUMLServer) {
+                this.markdown.plantUMLServer = md.plantUMLServer;
+            }
+
+            if (md.plantUMLFormat) {
+                this.markdown.plantUMLFormat = md.plantUMLFormat;
+            }
+
+            if (md.codeBlockLineNumber) {
+                this.markdown.codeBlockLineNumber = md.codeBlockLineNumber;
+            }
         }
     }
 }

js/contentworker.js

@@ -32,7 +32,7 @@ class ContentWorker extends Worker {
         this.viki.info.contentContainerId = 'viki-content';
         this.viki.info.tocContainerId = 'viki-toc';
 
-        let mainDiv = $(`<div class="container-fluid"></div>`);
+        let mainDiv = $(`<div class="container-fluid" style="padding-top: 3rem;"></div>`);
         let containerDiv = $(`<div id="viki-content-container" class="row flex-xl-nowrap"></div>`);
         mainDiv.append(containerDiv);