public/css: Show code snippet language

Unify code styles.

public/css/syntax-highlight.css
public/css/tdro.css

2 files changed, 29 insertions, 37 deletions

diff --git a/public/css/syntax-highlight.css b/public/css/syntax-highlight.css
index e7ca0a5..bc2fc10 100644
--- a/public/css/syntax-highlight.css
+++ b/public/css/syntax-highlight.css
@@ -1,10 +1,11 @@
-/* Background               */ .chroma          { color: #f8f8f2; background-color: #272822; }
-/* Error                    */ .chroma .err     { color: #960050; background-color: #1e0010; }
-/* 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; background-color: #004766; padding: 0 1.25rem; margin: 0 -1.25rem; }
-/* LineNumbersTable         */ .chroma .lnt     { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
-/* LineNumbers              */ .chroma .ln      { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
+/* Background               */ .chroma             { color: #f8f8f2; background-color: #002e42; }
+/* Error                    */ .chroma .err        { color: #960050; background-color: #1e0010; }
+/* 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; background-color: #004766; padding: 0 1.25rem; margin: 0 -1.25rem; }
+/* LineNumbersTable         */ .chroma .lnt        { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
+/* LineNumbers              */ .chroma .ln         { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
+/* LanguageLabel            */ .chroma code:before { color: #e6e6e6; background-color: #006894; }
 
 /* Keyword                  */ .chroma .k   { color:       #93ddfd }
 /* KeywordConstant          */ .chroma .kc  { color:       #66d9ef }
diff --git a/public/css/tdro.css b/public/css/tdro.css
index 5ca7978..cdde74d 100644
--- a/public/css/tdro.css
+++ b/public/css/tdro.css
@@ -204,9 +204,8 @@ body {
 }
 
 code {
-  font-size: 0.735em;
+  font-size: 1rem;
   font-weight: normal;
-  border-radius: 3px;
   -ms-hyphens: auto;
   -ms-word-break: normal;
   overflow-wrap: break-word;
@@ -238,7 +237,7 @@ span {
   font-weight: inherit;
 }
 
-strong {
+strong * {
   font-weight: 700;
 }
 
@@ -246,21 +245,35 @@ pre {
   -webkit-overflow-scrolling: touch;
   background-color: #002e42;
   border-radius: 3px;
-  color: #fff;
   font-size: 0.875em;
-  overflow-x: auto;
-  padding: 1.25rem 1.5rem;
+  max-width: 100%;
+  overflow-x: scroll;
+  padding: 1.25em 1.5em;
   white-space: pre;
   word-wrap: normal;
 }
 
 pre code {
-  display: inline-block;
   background-color: transparent;
   color: currentColor;
+  display: inline-block;
   font-size: 1em;
-  padding: 0;
   min-width: 100%;
+  padding: 0.75em 0 0 0;
+  position: relative;
+}
+
+pre code:before {
+  border-radius: 0 0 0.25em 0.25em;
+  content: attr(data-lang);
+  font-size: 0.9em;
+  letter-spacing: 0.01rem;
+  line-height: 1;
+  padding: 0.25em 0.5em;
+  position: absolute;
+  left: 0;
+  text-transform: uppercase;
+  top: -1.4em;
 }
 
 .is-pulled-right {
@@ -497,14 +510,6 @@ ul {
   width: 100%;
 }
 
-.content pre {
-  -webkit-overflow-scrolling: touch;
-  overflow-x: auto;
-  padding: 1.25em 1.5em;
-  white-space: pre;
-  word-wrap: normal;
-}
-
 .content sup,
 .content sub {
   font-size: 75%;
@@ -620,12 +625,6 @@ ul {
   padding: 0;
 }
 
-.highlight pre {
-  background-color: #002e42;
-  overflow: auto;
-  max-width: 100%;
-}
-
 .input,
 .textarea,
 .select select {
@@ -1515,14 +1514,6 @@ video {
   box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.3);
 }
 
-p code {
-  font-size: 1rem;
-}
-
-strong code {
-  font-weight: 700;
-}
-
 a {
   border-bottom: 1px solid #999;
   color: #014cc6;