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;