From 5cb7c8b840501e1249256dc7fb815f3e457ba97a Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 28 Aug 2018 18:34:30 +0200
Subject: [PATCH] output language above all code blocks

---
 _src/_assets/javascripts/page-guide.js  |  3 +++
 _src/_assets/styles/bigchain/_code.scss | 13 +++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/_src/_assets/javascripts/page-guide.js b/_src/_assets/javascripts/page-guide.js
index 86aa77c..6543ffc 100644
--- a/_src/_assets/javascripts/page-guide.js
+++ b/_src/_assets/javascripts/page-guide.js
@@ -10,7 +10,10 @@ document.addEventListener('DOMContentLoaded', (event) => {
     const codeBlocks = document.querySelectorAll('.highlight')
 
     codeBlocks.forEach(codeBlock => {
+        const language = codeBlock.getElementsByTagName('code')[0].dataset.lang
+
         codeBlock.insertAdjacentHTML('afterbegin', clipboardButton)
+        codeBlock.insertAdjacentHTML('afterbegin', `<h6 class="highlight__title">${language}</h6>`)
     })
 
     const buttons = document.querySelectorAll('.highlight .btn--clipboard')
diff --git a/_src/_assets/styles/bigchain/_code.scss b/_src/_assets/styles/bigchain/_code.scss
index 4cc9ed1..7f8529f 100644
--- a/_src/_assets/styles/bigchain/_code.scss
+++ b/_src/_assets/styles/bigchain/_code.scss
@@ -77,17 +77,26 @@ pre {
     .btn--clipboard,
     .success__text {
         position: absolute;
-        top: .1rem;
+        top: $spacer * 1.65;
         right: .1rem;
     }
 
     .success__text {
-        top: 2rem;
+        top: $spacer * 3.5;
         right: -1.5rem;
         font-size: $font-size-xs;
     }
 }
 
+.highlight__title {
+    margin-top: 0;
+    margin-bottom: $spacer / 4;
+    margin-left: $spacer / 1.5;
+    font-size: $font-size-sm;
+    color: $gray-light;
+    display: inline-block;
+}
+
 .btn--clipboard {
     padding: 0 $spacer / 2;
     box-shadow: none;