93 lines
1.8 KiB
Svelte
93 lines
1.8 KiB
Svelte
<script>
|
|
import { onMount } from "svelte";
|
|
|
|
import Highlight from "svelte-highlight";
|
|
import lua from "svelte-highlight/languages/lua";
|
|
export let children;
|
|
export let properties;
|
|
|
|
const languages = {
|
|
lua: lua
|
|
};
|
|
|
|
let language;
|
|
if (properties && properties.class) {
|
|
language = languages[properties.class.split('-')[1]];
|
|
}
|
|
let code = children[0].value;
|
|
|
|
const copy = () => window.navigator.clipboard.writeText(children[0].value.trim());
|
|
|
|
let copied = false;
|
|
|
|
let jsOn = false;
|
|
onMount(() => jsOn = true);
|
|
</script>
|
|
|
|
<style>
|
|
:global(.hljs) {
|
|
border-radius: 8px;
|
|
font-size: 0.9em;
|
|
width: fit-content;
|
|
padding-right: 50px !important;
|
|
max-width: calc(100% - 1em - 50px);
|
|
}
|
|
div {
|
|
position: relative;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
}
|
|
button {
|
|
position: absolute;
|
|
top: 37px;
|
|
right: 0;
|
|
border-radius: 8px;
|
|
border: none;
|
|
padding: 5px;
|
|
background-color: rgba(205, 205, 205, 0.3);
|
|
font-size: 0.8em;
|
|
font-family: var(--font-regular);
|
|
font-weight: 300;
|
|
transition: 0.2s background-color;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background-color: rgba(205, 205, 205, 0.4);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
button {
|
|
background-color: rgba(105, 105, 105, 0.3);
|
|
color: #eee;
|
|
}
|
|
button:hover {
|
|
background-color: rgba(105, 105, 105, 0.4);
|
|
}
|
|
}
|
|
div {
|
|
margin-top: -34px;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
.dumbhack {
|
|
/* im so sorry for this dumb hack lmao */
|
|
margin-top: -6em;
|
|
margin-bottom: -2em;
|
|
z-index: -999;
|
|
}
|
|
</style>
|
|
|
|
{#if properties.class}
|
|
<div class:dumbhack={!jsOn}>
|
|
<button
|
|
on:click={() => {copied = true; copy()}}
|
|
on:pointerleave={() => {copied = false}}
|
|
class:hidden={!jsOn}
|
|
>
|
|
{copied ? 'copied!' : 'copy'}
|
|
</button>
|
|
<Highlight {language} {code}/>
|
|
</div>
|
|
{:else}
|
|
<code>{code}</code>
|
|
{/if} |