54 lines
1.0 KiB
Svelte
54 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import Highlight from "svelte-highlight";
|
|
import highlightStyle from "svelte-highlight/styles/vs2015";
|
|
import getLangFromShare from "./getLangFromShare";
|
|
|
|
export let contentType: string;
|
|
export let filename: string;
|
|
export let slug: string;
|
|
|
|
async function loadShare() {
|
|
const res = await fetch(`/s/${slug}`);
|
|
return await res.text();
|
|
}
|
|
|
|
async function loadLang() {
|
|
return await getLangFromShare(contentType,filename).then(v => v.default);
|
|
}
|
|
</script>
|
|
|
|
|
|
<svelte:head>
|
|
{@html highlightStyle}
|
|
</svelte:head>
|
|
|
|
<div class="container" >
|
|
<header>{filename}</header>
|
|
|
|
{#await Promise.all([loadShare(), loadLang()])}
|
|
Loading...
|
|
{:then v}
|
|
<Highlight language={v[1]} code={v[0]} />
|
|
{/await}
|
|
</div>
|
|
|
|
<style>
|
|
header{
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
margin-bottom: 1rem;
|
|
color: var(--color-secondary);
|
|
border-bottom: solid 1px var(--color-primary);
|
|
|
|
padding: 1rem;
|
|
}
|
|
|
|
.container{
|
|
border-width: 2px;
|
|
border-color: var(--color-primary);
|
|
border-style: solid;
|
|
border-radius: 5px;
|
|
min-width: 50rem;
|
|
}
|
|
|
|
</style> |