129 lines
3.0 KiB
Svelte
129 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import 'highlight.js/styles/github.css'
|
|
import hljs from 'highlight.js/lib/core'
|
|
import javascript from 'highlight.js/lib/languages/javascript'
|
|
import python from 'highlight.js/lib/languages/python'
|
|
import yaml from 'highlight.js/lib/languages/yaml'
|
|
import json from 'highlight.js/lib/languages/json'
|
|
import bash from 'highlight.js/lib/languages/bash'
|
|
import docker from 'highlight.js/lib/languages/dockerfile'
|
|
import rust from 'highlight.js/lib/languages/rust'
|
|
import css from 'highlight.js/lib/languages/css'
|
|
import typescript from 'highlight.js/lib/languages/typescript'
|
|
|
|
hljs.registerLanguage('javascript', javascript)
|
|
hljs.registerLanguage('python', python)
|
|
hljs.registerLanguage('yaml', yaml)
|
|
hljs.registerLanguage('json', json)
|
|
hljs.registerLanguage('bash', bash)
|
|
hljs.registerLanguage('docker', docker)
|
|
hljs.registerLanguage('rust', rust)
|
|
hljs.registerLanguage('css', css)
|
|
hljs.registerLanguage('typescript', typescript)
|
|
|
|
import { onMount } from 'svelte'
|
|
|
|
export let content: string
|
|
|
|
function encodeTextToUrl(text: string): string {
|
|
return text
|
|
.replace(/[^A-Za-z ]/, '')
|
|
.replace('/ +/', ' ')
|
|
.replace(' ', '-')
|
|
}
|
|
|
|
onMount(() => {
|
|
hljs.highlightAll()
|
|
|
|
const selector = [1, 2, 3, 4, 5, 6].map((i) => `div.adapter h${i}`).join(', ')
|
|
const elements = window.document.querySelectorAll(selector)
|
|
elements.forEach((el) => {
|
|
if (el.textContent) {
|
|
const hash = encodeTextToUrl(el.textContent)
|
|
el.innerHTML = `<a class="target-link" name="${hash}" href="${window.location.pathname}#${hash}">${el.innerHTML}</a>`
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<div class="adapter">
|
|
{@html content}
|
|
</div>
|
|
|
|
<style>
|
|
div :global(.alignfull) {
|
|
width: calc(100vw - 6em);
|
|
margin-left: -2em;
|
|
}
|
|
div :global(.alignwide) {
|
|
width: calc(100% + 4em);
|
|
margin-left: -2em;
|
|
}
|
|
@media (max-width: 30em) {
|
|
div :global(.alignfull) {
|
|
width: calc(100vw - 4em);
|
|
margin-left: -1em;
|
|
}
|
|
div :global(.alignwide) {
|
|
width: calc(100% + 2em);
|
|
margin-left: -1em;
|
|
}
|
|
}
|
|
|
|
div :global(figure img) {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
div :global(figure) {
|
|
margin: 2em 0;
|
|
}
|
|
div :global(figure figcaption) {
|
|
opacity: 0.75;
|
|
font-style: italic;
|
|
}
|
|
|
|
div :global(a) {
|
|
border-bottom: 0.125em solid var(--clr-primary);
|
|
}
|
|
|
|
div :global(pre) {
|
|
padding: 1em;
|
|
background: #0000000d;
|
|
overflow: auto;
|
|
}
|
|
|
|
div :global(code) {
|
|
background: #00000012;
|
|
padding: 0.25em;
|
|
font-size: 0.8em;
|
|
}
|
|
div :global(pre code) {
|
|
background: initial;
|
|
padding: initial;
|
|
-moz-tab-size: 2;
|
|
tab-size: 2;
|
|
}
|
|
|
|
div :global(h1),
|
|
div :global(h2),
|
|
div :global(h3),
|
|
div :global(h4),
|
|
div :global(h5),
|
|
div :global(h6) {
|
|
margin: 0;
|
|
margin-top: 3em;
|
|
border-left: 0.2rem solid var(--clr-primary);
|
|
padding-left: 0.5rem;
|
|
margin-left: -0.7rem;
|
|
}
|
|
|
|
div :global(.target-link) {
|
|
border-bottom: none;
|
|
}
|
|
|
|
div :global(p.has-background) {
|
|
padding: 0.5em;
|
|
}
|
|
</style>
|