[fix] 3rd party library rendering bug fixed

README.md

@@ -36,7 +36,7 @@ Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(alw
 
 ## Minimum Hugo version
 
-Hugo version 0.58.0 or higher is required.
+Hugo version 0.60.0 or higher is required.
 
 ## Installation
 

assets/sass/components/_diagram.scss

@@ -6,15 +6,27 @@
     overflow: auto;
 }
 
-// flowchart.js
-.diagram {
+.diagram {    
     overflow: auto;
     margin-right: 1rem;
     margin-bottom: 1rem;
     border-radius: 0.25rem;
+    @include flexbox();
+    @include justify-content(center);
 }
 
-div[id^=WaveDrom_Display] {
+[id^=msc] {
+    overflow: auto;
+    margin: 0.5rem 0;
+    text-align: center;    
+}
+
+[id^=flowchart] {
+    overflow: auto;
+}
+
+[id^=WaveDrom_Display] {
+    overflow: auto;
     background-color: #FCFCFA;
     border-radius: 0.25rem;
 }

assets/sass/main.scss

@@ -21,6 +21,8 @@ $chroma_theme: {{ $scr.Get "chroma_theme" }};
 @import 'abstracts/functions';
 @import 'abstracts/flexbox';
 
+@import 'syntax/syntax';
+
 @import 'base/reset';
 @import 'base/fonts';
 @import 'base/helpers';
@@ -62,6 +64,4 @@ $chroma_theme: {{ $scr.Get "chroma_theme" }};
 @import 'pages/gallery';
 @import 'pages/list';
 @import 'pages/single';
-@import 'pages/terms';
-
-@import 'syntax/syntax';
+@import 'pages/terms';

assets/sass/pages/_single.scss

@@ -283,23 +283,23 @@
   }
 }
 
-code, pre {
+code, pre {  
   padding: .5rem 0;
   line-height: 1.5em;
   font-size: $code-font-size;
   font-family: $code-font-stack;  
-  
-  // @include themify($themes) {
-  //   background: themed('content-pre-background-color');
-  // }
+
+  @include themify($themes) {
+    background: themed('content-pre-background-color');
+  }
 
   a {
     text-decoration: none !important;
   }
 }
 
-code {
-  //padding: 3px 5px;  
+code {  
+  padding: 3px 5px;  
   border-radius: 4px;
   // @include themify($themes) {
   //   background: themed('content-pre-background-color');
@@ -325,7 +325,7 @@ code {
   }
 
   code {
-    padding: 0;
+    padding: 0;    
   }
 
   table {

assets/sass/syntax/_autumn.scss

@@ -1,4 +1,4 @@
-@mixin chrome-autumn {
+@mixin chroma-autumn {
   /* Background */ .chroma { background-color: #ffffff }
   /* Error */ .chroma .err { color: #ff0000; background-color: #ffaaaa }
   /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }

assets/sass/syntax/_solarized.scss

@@ -1,5 +1,5 @@
 @mixin chroma-solarized {
-  /* Background */ .chroma { color: #344952; background-color: #faf5e6 }
+  /* Background */ .chroma { color: #dc322f; background-color: #ede9da }
   /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
   /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
   /* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
@@ -27,7 +27,7 @@
   /* NameNamespace */ .chroma .nn { color: #c47e00 }
   /* NameOther */ .chroma .nx { color: #c47e00 }
   /* NameProperty */ .chroma .py { color: #c47e00 }
-  /* NameTag */ .chroma .nt { color: #c47e00; font-weight: bold }
+  /* NameTag */ .chroma .nt { color: #268bd2; font-weight: bold }
   /* NameVariable */ .chroma .nv { color: #c47e00 }
   /* NameVariableClass */ .chroma .vc { color: #c47e00 }
   /* NameVariableGlobal */ .chroma .vg { color: #c47e00 }

assets/sass/syntax/_syntax.scss

@@ -53,7 +53,11 @@
   
   .theme__solarized {
     @include chroma-solarized;
-  }  
+  } 
+
+  .theme__custom {
+    @include chroma-autumn;
+  }
 } @else if $chroma_theme == abap {
   @include chroma-abap;
 } @else if $chroma_theme == algol {

assets/sass/themes/_solarized.scss

@@ -49,7 +49,7 @@ $solarized: (
     content-pre-main-color: #B58900,
     content-pre-color: #344952,
     content-pre-number-color: #aaa,
-    content-pre-background-color: #FBF1D1,
+    content-pre-background-color: #ede9da,
     content-pre-border-background-color: darken(#FBF1D1, 12%),
     content-pre-header-background-color: darken(#FBF1D1, 6%),
     content-pre-header-color: #344952,

data/skin.toml

@@ -1,3 +1,3 @@
 custom_theme_primary_color = "195" # 0 ~ 359, Colors HSL, restart hugo after change this value
 
-chroma_theme = "default"
+chroma_theme = "default" # https://xyproto.github.io/splash/docs/longer/all.html

exampleSite/config/_default/config.toml

@@ -15,9 +15,12 @@ paginate = 13
 rssLimit = 100
 
 pygmentsOptions = "linenos=table"
-pygmentsCodefences = true
 pygmentsUseClasses = true
-pygmentsCodefencesGuessSyntax = true
+
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true
 
 [outputs]
   home = ["HTML", "RSS", "JSON", "WebAppManifest"]

layouts/partials/script/single-script.html

@@ -79,6 +79,7 @@
             element.setAttribute('data-lang', mapLang(sub.getAttribute('data-lang')));
           } else {
             element.setAttribute('data-lang', 'Code');
+            $(element).addClass('chroma');
           }
         }
       );
@@ -213,10 +214,23 @@
           clipInit = true;
         }
 
-        code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />');
-        code.next('.copy-to-clipboard').on('mouseleave', function () {
-          $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
-        });
+        var notAllowedClass = ['language-mermaid', 'language-viz', 'language-wave', 'language-chart', 'language-msc', 'language-flowchart'];
+        var isNotAllowedIncluded = false;
+        var curClassName = code.attr('class');
+
+        for (let str of notAllowedClass) {
+          if (curClassName && curClassName.startsWith(str)) {
+            isNotAllowedIncluded = true;
+            break;
+          } 
+        }
+
+        if (!isNotAllowedIncluded) {
+          code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />');
+          code.next('.copy-to-clipboard').on('mouseleave', function () {
+            $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
+          });
+        }        
       }
     });
 
@@ -281,8 +295,16 @@
         mermaid.initialize({ theme: 'default' });
       }
       
-      // mermaid Fix Mermaid.js clash with Highlight.js.
-      $('code.language-mermaid:odd').each(function() {
+      let mermaids = [];
+      [].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
+      for (i = 0; i < mermaids.length; i++) {
+        $(mermaids[i]).unwrap('pre');
+        $(mermaids[i]).replaceWith(function () {
+          return $("<div />").append($(this).contents()).addClass('mermaid').css('padding', '34px 4px 6px');
+        });
+      }
+
+      /*$('code.language-mermaid:odd').each(function() {
         $(this).unwrap('pre');
         $(this).replaceWith(function () {
           return $("<div />").append($(this).contents()).addClass('mermaid').css('padding', '34px 4px 6px');
@@ -291,7 +313,7 @@
 
       $('code.language-mermaid').each(function (index, node) {
         $(this).css('display', 'none');
-      });
+      });*/
     }
 
     // katex
@@ -303,7 +325,7 @@
         { left: "\\[", right: "\\]", display: true }
       ];
 
-      renderMathInElement(document.getElementsByClassName('single__contents')[0], options);
+      renderMathInElement(document.querySelector('.single__contents'), options);
     }
 
     // flowchart.js
@@ -311,7 +333,24 @@
       {{ $flowchartjs := .Site.Data.flowchartjs }}
       var options = JSON.parse({{ $flowchartjs | jsonify }});
 
-      $('code.language-flowchart:odd').each(function (index, node) {
+      var flowchartPrefix = "language-flowchart";
+      var index = 0;
+      Array.prototype.forEach.call(document.querySelectorAll("[class^=" + flowchartPrefix + "]"), function(x){
+          x.style.display = 'none'
+          x.parentNode.style.backgroundColor = "transparent"
+          jsonContent = x.innerText;
+
+          node0 = document.createElement('div');
+          node0.id = 'flowchart' + index;
+          x.parentNode.insertBefore(node0, x);
+
+          var diagram = flowchart.parse(jsonContent);
+          diagram.drawSVG("flowchart"+index, options);
+
+          index +=1;
+      });
+      
+      /*$('code.language-flowchart:odd').each(function (index, node) {
         var diagramContent = $(this).contents();
         $(this).closest('table').attr('data-content', 'FLOWCHART');
         $(this).unwrap('pre');
@@ -329,7 +368,7 @@
         $(this).replaceWith(function () {
           return $("<div></div>");
         });      
-      });
+      });*/
     }
 
     // mathjax
@@ -352,17 +391,31 @@
       {{ $msc := .Site.Data.msc }}
       var options = JSON.parse({{ $msc | jsonify }});    
 
-      $('code.language-msc:odd').each(function() {
+      var index = 0;
+      var chartPrefix = "language-msc";
+      Array.prototype.forEach.call(document.querySelectorAll("[class^=" + chartPrefix + "]"), function (x) {
+        x.style.display = 'none'
+        x.parentNode.style.backgroundColor = "transparent"
+        jsonContent = x.innerText;
+        node0 = document.createElement('div');
+        node0.id = 'msc' + index;
+        x.parentNode.insertBefore(node0, x);
+        var diagram = Diagram.parse(jsonContent);
+        diagram.drawSVG("msc" + index, options);
+        index += 1;
+      });
+
+      /*$('code.language-msc:odd').each(function() {
         $(this).unwrap('pre');
         $(this).replaceWith(function () {
-          return $("<div />").append($(this).contents()).addClass('diagram').css('padding', '34px 4px 6px').css('margin-top', '40px');
+          return $("<div />").append($(this).contents()).addClass('diagram');
         });
       });
       $(".diagram").sequenceDiagram(options);
 
       $('code.language-msc').each(function (index, node) {
         $(this).css('display', 'none');
-      });
+      });*/
     }
 
     // chart.js
@@ -383,7 +436,24 @@
       Chart.defaults.global.elements.point.borderColor = borderColor;
       Chart.defaults.global.elements.point.backgroundColor = bgColor;
 
-      $('code.language-chart:odd').each(function (index, node) {
+      var chartPrefix = "language-chart";
+      var index = 0;
+      Array.prototype.forEach.call(document.querySelectorAll("[class^=" + chartPrefix + "]"), function (x) {
+        x.style.display = 'none'
+        x.parentNode.style.backgroundColor = "transparent"
+        jsonContent = x.innerText;
+        node0 = document.createElement('canvas');
+        node0.height = 200;
+        node0.style.height = 200;
+        node0.id = 'myChart' + index;
+        source = JSON.parse(jsonContent);
+        x.parentNode.insertBefore(node0, x);
+        var ctx = document.getElementById('myChart' + index).getContext('2d');
+        var myChart = new Chart(ctx, source);
+        index += 1;
+      });      
+
+      /*$('code.language-chart:odd').each(function (index, node) {
         $(this).unwrap('pre');
 
         node0 = document.createElement('canvas');
@@ -401,12 +471,13 @@
 
       $('code.language-chart:even').each(function (index, node) {
         $(this).css('display', 'none');
-      });
+      });*/
+      
     }
 
     // wavedrom
     if (lib && lib.includes('wavedrom')) {
-      $('code.language-wave:odd').each(function (index, node) {
+      /*$('code.language-wave:odd').each(function (index, node) {
         $(this).unwrap('pre');
 
         node0 = document.createElement('div');
@@ -422,12 +493,26 @@
 
       $('code.language-wave').each(function (index, node) {
         $(this).css('display', 'none');
+      });*/
+
+      var wavePrefix = "language-wave";
+      var index = 0;
+      Array.prototype.forEach.call(document.querySelectorAll("[class^=" + wavePrefix + "]"), function (x) {
+        x.style.display = 'none'
+        x.parentNode.style.backgroundColor = "transparent"
+        jsonContent = x.innerText;
+        node0 = document.createElement('div');
+        node0.id = 'WaveDrom_Display_' + index;
+        source = JSON.parse(jsonContent);
+        x.parentNode.insertBefore(node0, x);
+        WaveDrom.RenderWaveForm(index, source, "WaveDrom_Display_");
+        index += 1;
       });
     }
 
     // viz diagram
     if (lib && lib.includes('viz')) {
-      var vizPrefix = "language-viz-";
+      /*var vizPrefix = "language-viz-";
       $('pre[class*="language-viz-"]:odd').each(function (index, node) {
         $(this).unwrap('pre');
 
@@ -448,6 +533,24 @@
       });
       $('code[class*="language-viz-"]:even').each(function (index, node) {
         $(this).hide();
+      });*/
+
+      var vizPrefix = "language-viz-";
+      Array.prototype.forEach.call(document.querySelectorAll("[class^=" + vizPrefix + "]"), function (x) {
+        x.style.display = 'none'
+        x.parentNode.style.backgroundColor = "transparent"
+        var engine;
+        x.getAttribute("class").split(" ").forEach(function (cls) {
+          if (cls.startsWith(vizPrefix)) {
+            engine = cls.substr(vizPrefix.length);
+          }
+        });
+        var viz = new Viz();
+        viz.renderSVGElement(x.innerText, { engine: engine })
+          .then(function (element) {
+            element.style.width = "100%";
+            x.parentNode.insertBefore(element, x);
+          })
       });
     }
   }