Add language tags to code blocks (#67)

_css/custom.css

@@ -55,3 +55,61 @@
   padding: 0.5em;
   margin-bottom: 1em;
 }
+
+
+/* ==================================================================
+    HLJS CODE BLOCKS
+================================================================== */
+
+.hljs {
+  position: relative;
+  font-size: var(--small);
+  line-height: 1.35em;
+  border-radius: 10px;
+}
+
+.hljs-meta { font-weight: bold;}
+
+/* Use colors from theme specified in style.html */
+.hljs-meta.prompt_ {color: #7ee787;}
+.hljs-meta.help_ {color: #f2cc60;}
+.hljs-meta.shell_ {color: #ff7b72;}
+.hljs-meta.infiltrator_ {color: #ffa657;}
+.hljs-meta.debugger_ {color: #ffa657;}
+.hljs-meta.debuggereval_ {color: #ffa657;}
+
+/* Add language name to code blocks */
+.hljs::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.2rem 0.5rem 0.1rem;
+  background-color: #27303c; /* brighter than #0d1117 */
+  border-bottom-right-radius:10px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+/* Define language names shown in code blocks */
+.language-bash::before       {content: "Shell";}
+.language-toml::before       {content: "TOML";}
+.language-julia::before      {content: "Julia";}
+/* Special Franklin tags for Julia REPL modes */ 
+.language-julia-repl::before {content: "Julia REPL";}
+.julia-repl::before          {content: "Julia REPL";}
+.julia-repl-pkg::before      {content: "Julia REPL: Pkg mode";}
+.julia-repl-help::before     {content: "Julia REPL: Help mode";}
+.julia-repl-shell::before    {content: "Julia REPL: Shell mode";}
+/* Julia code after REPL prompts doesn't need a language tag */
+.language-julia-repl .language-julia::before {content: "";}
+.julia-repl          .language-julia::before {content: "";}
+.julia-repl-pkg      .language-julia::before {content: "";}
+.julia-repl-help     .language-julia::before {content: "";}
+.julia-repl-shell    .language-julia::before {content: "";}
+/* Julia code in doc strings printed via REPL Help mode is sometimes incorrectly 
+recognized as Ruby code. Since we don't have any Ruby code in MJW, this is a quick fix. 
+TODO: remove when not required in Xranklin.
+*/
+.language-ruby::before {content: "Julia";}

_css/franklin.css

@@ -302,6 +302,10 @@ code {
 
 /* font-size: 90%; } */
 
+/* NOTE:
+The highlight.js (hljs) styling of Modern Julia Workflows is in _css/custom.css.
+The following commented-out code is the original Franklin CSS:
+
 .hljs {
   font-size: var(--small);
   line-height: 1.35em;
@@ -312,10 +316,7 @@ code {
 
 .hljs-meta.shell_ {color: crimson;}
 .hljs-meta.prompt_ {color: rgb(25, 179, 51);}
-.hljs-meta.help_ {color: yellow;}
-.hljs-meta.infiltrator_ {color: rgb(240, 150, 30);}
-.hljs-meta.debugger_ {color: rgb(240, 150, 30);}
-.hljs-meta.debuggereval_ {color: rgb(240, 150, 30);}
+*/
 
 .code-output {
   background: var(--output-background);