Small fixes, make use of Bulma classes
This commit is contained in:
parent
6da77ed236
commit
6909b3afa7
|
@ -9,7 +9,6 @@
|
|||
|
||||
// Copy function for the code block
|
||||
import copy from "copy-to-clipboard";
|
||||
import { afterUpdate } from "svelte";
|
||||
|
||||
// Import all supported languages
|
||||
import {
|
||||
|
@ -73,30 +72,29 @@
|
|||
language = plaintext;
|
||||
}
|
||||
|
||||
// For copying code
|
||||
// reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
|
||||
// For copying code - reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
|
||||
const copyFunction = (event) => {
|
||||
// Get the button the user click
|
||||
const clickedElement = event.target as HTMLElement;
|
||||
// Get the button the user clicked on
|
||||
const clickedElement = event.target as HTMLButtonElement;
|
||||
|
||||
// Get the next element
|
||||
const nextElement = clickedElement.nextElementSibling;
|
||||
|
||||
// Modify the appearance of the button
|
||||
const originalButtonContent = clickedElement.innerHTML
|
||||
clickedElement.classList.add("is-success")
|
||||
clickedElement.innerHTML = "Copied!"
|
||||
const originalButtonContent = clickedElement.innerHTML;
|
||||
clickedElement.classList.add("is-success");
|
||||
clickedElement.innerHTML = "Copied!";
|
||||
|
||||
// Retrieve the code in the code block
|
||||
let codeBlock = nextElement.querySelector("pre > code").innerHTML;
|
||||
const codeBlock = (nextElement.querySelector("pre > code") as HTMLPreElement).innerText;
|
||||
copy(codeBlock);
|
||||
|
||||
// Restored the button after copying the text in 1 second.
|
||||
setTimeout(() => {
|
||||
clickedElement.innerHTML = originalButtonContent;
|
||||
clickedElement.classList.remove("is-success")
|
||||
clickedElement.classList.remove("is-success");
|
||||
clickedElement.blur();
|
||||
}, 1000);
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
@ -104,21 +102,16 @@
|
|||
{@html style}
|
||||
</svelte:head>
|
||||
|
||||
<div class="code-block">
|
||||
<button class="button is-light is-outlined is-small" on:click={copyFunction}>Copy</button>
|
||||
<div class="code-block is-relative">
|
||||
<button class="button is-light is-outlined is-small p-2" on:click={copyFunction}>Copy</button>
|
||||
<Highlight code={text} {language} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* for copy button */
|
||||
.code-block{
|
||||
position: relative;
|
||||
}
|
||||
.code-block > button {
|
||||
padding: .5rem;
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
right: .5rem;
|
||||
z-index: 10;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue