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', `
${language}
`)
})
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;