You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.2 KiB
73 lines
1.2 KiB
<script>
|
|
import { onMount } from 'svelte';
|
|
import Prism from 'prismjs';
|
|
import 'prism-svelte';
|
|
export let source = "";
|
|
let css_code = "";
|
|
let html_code = "";
|
|
let notes_html = "";
|
|
export let notes = "";
|
|
|
|
onMount(() => {
|
|
fetch(`${source}.css`)
|
|
.then(resource => resource.text())
|
|
.then(data => css_code = data);
|
|
|
|
fetch(`${source}.html`)
|
|
.then(resource => resource.text())
|
|
.then(data => html_code = data)
|
|
.then(() => Prism.highlightAll());
|
|
|
|
|
|
if(notes) {
|
|
fetch(`${source}.notes.html`)
|
|
.then(resource => resource.text())
|
|
.then(data => notes_html = data)
|
|
.then(() => Prism.highlightAll());
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
code-view {
|
|
display:flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
code-view css-view {
|
|
flex: 1;
|
|
}
|
|
|
|
code-view html-view {
|
|
flex: 2;
|
|
max-width: 50%;
|
|
}
|
|
|
|
</style>
|
|
|
|
<code-view>
|
|
<css-view>
|
|
<h1>CSS</h1>
|
|
<pre>
|
|
<code class="language-svelte">
|
|
{css_code}
|
|
</code>
|
|
</pre>
|
|
</css-view>
|
|
|
|
<html-view>
|
|
<h1>HTML</h1>
|
|
<pre>
|
|
<code class="language-svelte">
|
|
{html_code}
|
|
</code>
|
|
</pre>
|
|
</html-view>
|
|
</code-view>
|
|
|
|
{#if notes}
|
|
<hr>
|
|
<h2>Notes</h2>
|
|
{@html notes_html}
|
|
{/if}
|
|
|