diff --git a/asset/css/markbind.css b/asset/css/markbind.css index d38eb2b900..01a4dc15dd 100644 --- a/asset/css/markbind.css +++ b/asset/css/markbind.css @@ -369,3 +369,45 @@ li.footnote-item:target { transform: scale(1); opacity: 1; } + +/* "Copy" code block button */ +pre { + position: relative; +} + +.copy-btn { + background-color: #b4b4b9; + border-radius: 0.25rem; + color: #f8f8ff; + display: inline-block; + font-size: 75%; + line-height: 1; + padding: 0.25em 0.4em; + position: absolute; + right: 0.5em; + text-align: center; + top: 0.4em; + white-space: nowrap; +} + +.copy-btn:hover { + color: #555; +} + +.copy-btn-body { + align-items: center; + display: flex; +} + +.copy-btn svg { + fill: currentColor; + margin-right: 0.4em; +} + +.copy-btn-label { + font-size: 11px; +} + +.copy-btn:focus { + outline: none; +} diff --git a/docs/images/copyCode.png b/docs/images/copyCode.png new file mode 100644 index 0000000000..0bd900728a Binary files /dev/null and b/docs/images/copyCode.png differ diff --git a/docs/userGuide/plugins/codeBlockCopyButtons.mbdf b/docs/userGuide/plugins/codeBlockCopyButtons.mbdf new file mode 100644 index 0000000000..4681894ab1 --- /dev/null +++ b/docs/userGuide/plugins/codeBlockCopyButtons.mbdf @@ -0,0 +1,20 @@ +#### `codeBlockCopyButtons`: Enabling code-blocks to be copied + +This plugin allows you to copy code in code-blocks on a button-click. + +To enable it, simply add `codeBlockCopyButtons` to your site's plugins. + +```js +site.json +{ + ... + "plugins": [ + "codeBlockCopyButtons" + ], +} +``` + +This is what it'll look like once added - + + + diff --git a/docs/userGuide/usingPlugins.md b/docs/userGuide/usingPlugins.md index 4ae21f7376..86687a1ad6 100644 --- a/docs/userGuide/usingPlugins.md +++ b/docs/userGuide/usingPlugins.md @@ -207,6 +207,7 @@ Disabling the `anchors` plugin: MarkBind has a set of built-in plugins that can be used immediately without installation. + diff --git a/src/plugins/codeBlockCopyButtons.js b/src/plugins/codeBlockCopyButtons.js new file mode 100644 index 0000000000..6f74c53fc6 --- /dev/null +++ b/src/plugins/codeBlockCopyButtons.js @@ -0,0 +1,56 @@ +const cheerio = module.parent.require('cheerio'); + +const COPIED_TO_CLIPBOARD = 'Copied!'; +const COPY_ICON = ''; +const COPY_TO_CLIPBOARD = 'Copy'; + +function getButtonHTML() { + const html = ``; + return html; +} + + +const copyCodeBlockScript = ``; + + +module.exports = { + getScripts: () => copyCodeBlockScript, + postRender: (content) => { + const $ = cheerio.load(content, { xmlMode: false }); + const codeBlockSelector = 'pre'; + const buttonHTML = getButtonHTML(); + $(codeBlockSelector).each((i, codeBlock) => { + $(codeBlock).append(buttonHTML); + }); + return $.html(); + }, +}; diff --git a/test/functional/test_site/expected/markbind/css/markbind.css b/test/functional/test_site/expected/markbind/css/markbind.css index d38eb2b900..01a4dc15dd 100644 --- a/test/functional/test_site/expected/markbind/css/markbind.css +++ b/test/functional/test_site/expected/markbind/css/markbind.css @@ -369,3 +369,45 @@ li.footnote-item:target { transform: scale(1); opacity: 1; } + +/* "Copy" code block button */ +pre { + position: relative; +} + +.copy-btn { + background-color: #b4b4b9; + border-radius: 0.25rem; + color: #f8f8ff; + display: inline-block; + font-size: 75%; + line-height: 1; + padding: 0.25em 0.4em; + position: absolute; + right: 0.5em; + text-align: center; + top: 0.4em; + white-space: nowrap; +} + +.copy-btn:hover { + color: #555; +} + +.copy-btn-body { + align-items: center; + display: flex; +} + +.copy-btn svg { + fill: currentColor; + margin-right: 0.4em; +} + +.copy-btn-label { + font-size: 11px; +} + +.copy-btn:focus { + outline: none; +} diff --git a/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css b/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css index d38eb2b900..01a4dc15dd 100644 --- a/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css +++ b/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css @@ -369,3 +369,45 @@ li.footnote-item:target { transform: scale(1); opacity: 1; } + +/* "Copy" code block button */ +pre { + position: relative; +} + +.copy-btn { + background-color: #b4b4b9; + border-radius: 0.25rem; + color: #f8f8ff; + display: inline-block; + font-size: 75%; + line-height: 1; + padding: 0.25em 0.4em; + position: absolute; + right: 0.5em; + text-align: center; + top: 0.4em; + white-space: nowrap; +} + +.copy-btn:hover { + color: #555; +} + +.copy-btn-body { + align-items: center; + display: flex; +} + +.copy-btn svg { + fill: currentColor; + margin-right: 0.4em; +} + +.copy-btn-label { + font-size: 11px; +} + +.copy-btn:focus { + outline: none; +} diff --git a/test/functional/test_site_convert/expected/markbind/css/markbind.css b/test/functional/test_site_convert/expected/markbind/css/markbind.css index d38eb2b900..01a4dc15dd 100644 --- a/test/functional/test_site_convert/expected/markbind/css/markbind.css +++ b/test/functional/test_site_convert/expected/markbind/css/markbind.css @@ -369,3 +369,45 @@ li.footnote-item:target { transform: scale(1); opacity: 1; } + +/* "Copy" code block button */ +pre { + position: relative; +} + +.copy-btn { + background-color: #b4b4b9; + border-radius: 0.25rem; + color: #f8f8ff; + display: inline-block; + font-size: 75%; + line-height: 1; + padding: 0.25em 0.4em; + position: absolute; + right: 0.5em; + text-align: center; + top: 0.4em; + white-space: nowrap; +} + +.copy-btn:hover { + color: #555; +} + +.copy-btn-body { + align-items: center; + display: flex; +} + +.copy-btn svg { + fill: currentColor; + margin-right: 0.4em; +} + +.copy-btn-label { + font-size: 11px; +} + +.copy-btn:focus { + outline: none; +} diff --git a/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css b/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css index d38eb2b900..01a4dc15dd 100644 --- a/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css +++ b/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css @@ -369,3 +369,45 @@ li.footnote-item:target { transform: scale(1); opacity: 1; } + +/* "Copy" code block button */ +pre { + position: relative; +} + +.copy-btn { + background-color: #b4b4b9; + border-radius: 0.25rem; + color: #f8f8ff; + display: inline-block; + font-size: 75%; + line-height: 1; + padding: 0.25em 0.4em; + position: absolute; + right: 0.5em; + text-align: center; + top: 0.4em; + white-space: nowrap; +} + +.copy-btn:hover { + color: #555; +} + +.copy-btn-body { + align-items: center; + display: flex; +} + +.copy-btn svg { + fill: currentColor; + margin-right: 0.4em; +} + +.copy-btn-label { + font-size: 11px; +} + +.copy-btn:focus { + outline: none; +} diff --git a/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css b/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css index d38eb2b900..01a4dc15dd 100644 --- a/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css +++ b/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css @@ -369,3 +369,45 @@ li.footnote-item:target { transform: scale(1); opacity: 1; } + +/* "Copy" code block button */ +pre { + position: relative; +} + +.copy-btn { + background-color: #b4b4b9; + border-radius: 0.25rem; + color: #f8f8ff; + display: inline-block; + font-size: 75%; + line-height: 1; + padding: 0.25em 0.4em; + position: absolute; + right: 0.5em; + text-align: center; + top: 0.4em; + white-space: nowrap; +} + +.copy-btn:hover { + color: #555; +} + +.copy-btn-body { + align-items: center; + display: flex; +} + +.copy-btn svg { + fill: currentColor; + margin-right: 0.4em; +} + +.copy-btn-label { + font-size: 11px; +} + +.copy-btn:focus { + outline: none; +} diff --git a/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css b/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css index d38eb2b900..01a4dc15dd 100644 --- a/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css +++ b/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css @@ -369,3 +369,45 @@ li.footnote-item:target { transform: scale(1); opacity: 1; } + +/* "Copy" code block button */ +pre { + position: relative; +} + +.copy-btn { + background-color: #b4b4b9; + border-radius: 0.25rem; + color: #f8f8ff; + display: inline-block; + font-size: 75%; + line-height: 1; + padding: 0.25em 0.4em; + position: absolute; + right: 0.5em; + text-align: center; + top: 0.4em; + white-space: nowrap; +} + +.copy-btn:hover { + color: #555; +} + +.copy-btn-body { + align-items: center; + display: flex; +} + +.copy-btn svg { + fill: currentColor; + margin-right: 0.4em; +} + +.copy-btn-label { + font-size: 11px; +} + +.copy-btn:focus { + outline: none; +}