mirror of
https://github.com/BBaoVanC/bobatheme.git
synced 2024-12-22 12:13:19 -06:00
Improve code block copy text
- Use JS to get it directly from the code block instead of needing a separate `pre.code-raw` to get it from. That makes it possible to: - bashsession: Don't copy prompt or command output
This commit is contained in:
parent
342710a755
commit
80f5994d96
@ -12,14 +12,19 @@ window.onscroll = function() {
|
|||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
document.querySelectorAll(".code-block").forEach(codeBlock => {
|
document.querySelectorAll(".code-block").forEach(codeBlock => {
|
||||||
const button = codeBlock.querySelector(".code-header > .code-copy-button");
|
const button = codeBlock.querySelector(".code-header > .code-copy-button");
|
||||||
// TODO: maybe get this from HTMLElement.innerText on the actual code block content element
|
|
||||||
// but it's hard to select it; `data-lang` attribute might not always be there (if lang is unset)
|
// lang will not be unset because we default it to text
|
||||||
const rawCode = codeBlock.querySelector("pre.code-raw").innerText;
|
// clone it so it doesn't change the actual DOM element
|
||||||
|
const codeElem = codeBlock.querySelector("code[data-lang]").cloneNode(true);
|
||||||
|
// bashsession: remove command output lines
|
||||||
|
codeElem.querySelectorAll(".go").forEach(e => e.parentNode.removeChild(e));
|
||||||
|
// bashsession: remove prompt symbol
|
||||||
|
codeElem.querySelectorAll(".gp").forEach(e => e.parentNode.removeChild(e));
|
||||||
|
const rawCode = codeElem.innerText;
|
||||||
|
|
||||||
const originalCopyText = button.innerHTML;
|
const originalCopyText = button.innerHTML;
|
||||||
button.onclick = event => {
|
button.onclick = event => {
|
||||||
navigator.clipboard.writeText(rawCode);
|
navigator.clipboard.writeText(rawCode);
|
||||||
console.log(rawCode);
|
|
||||||
// TODO: maybe we could add a fancier indicator, like a flash or something
|
// TODO: maybe we could add a fancier indicator, like a flash or something
|
||||||
event.target.innerHTML = "Copied!";
|
event.target.innerHTML = "Copied!";
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
@ -1,13 +1,15 @@
|
|||||||
|
{{ $type := "text" }}
|
||||||
|
{{ with .Type }}
|
||||||
|
{{ $type = . }}
|
||||||
|
{{ end }}
|
||||||
<div class="code-block">
|
<div class="code-block">
|
||||||
<div class="code-header">
|
<div class="code-header">
|
||||||
<span class="code-type">{{ .Type }}</span>
|
<span class="code-type">{{ $type }}</span>
|
||||||
<a class="code-copy-button">
|
<a class="code-copy-button">
|
||||||
{{ i18n "copy_to_clipboard" }}
|
{{ i18n "copy_to_clipboard" }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{{/* a div.highlight is already created by highlight function */}}
|
|
||||||
{{ highlight .Inner .Type }}
|
|
||||||
|
|
||||||
{{/* for copy to clipboard */}}
|
{{/* a div.highlight is already created by highlight function */}}
|
||||||
<pre class="code-raw" style="display: none;">{{ .Inner }}</pre>
|
{{ highlight .Inner $type }}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user