svhighlight
svhighlight copied to clipboard
Line Spacing Problem
Mentioned to create an issue, so here it is.
//
<script lang="ts">
import { CodeBlock as SkeletonCodeBock } from '@skeletonlabs/skeleton';
import { CodeBlock } from 'svhighlight';
import 'highlight.js/styles/base16/darktooth.css';
const code = `
using System.IO.Compression;
#pragma warning disable 414, 3021
namespace MyApplication
{
[Obsolete("...")]
class Program : IInterface
{
public static List<int> JustDoIt(int count)
{
Span<int> numbers = stackalloc int[length];
Console.WriteLine($"Hello {Name}!");
return new List<int>(new int[] { 1, 2, 3 })
}
}
}`;
</script>
<SkeletonCodeBock language="csharp" {code} />
<CodeBlock language="csharp" {code} />
My +layout.svelte
<script lang="ts">
import hljs from 'highlight.js';
import '@skeletonlabs/skeleton/themes/theme-rocket.css';
import '../theme.postcss';
import '@skeletonlabs/skeleton/styles/all.css';
import '../app.postcss';
import {
AppBar,
AppShell,
Avatar,
Drawer,
Modal,
Toast,
drawerStore,
storeHighlightJs
} from '@skeletonlabs/skeleton';
import Navigation from '$lib/components/Navigation.svelte';
storeHighlightJs.set(hljs);
function drawerOpen(): void {
drawerStore.open();
}
</script>
<svelte:head>
<title>Svelte Playground</title>
</svelte:head>
<Toast position="br" />
<Modal />
<Drawer>
<Navigation />
</Drawer>
<AppShell slotSidebarLeft="w-0 md:w-52 bg-surface-500/10">
<svelte:fragment slot="header">
<AppBar>
<svelte:fragment slot="lead">
<button class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}>
<span>
<svg viewBox="0 0 100 80" class="fill-token w-4 h-4">
<rect width="100" height="20" />
<rect y="30" width="100" height="20" />
<rect y="60" width="100" height="20" />
</svg>
</span>
</button>
<strong class="text-xl">Svelte Playground</strong>
</svelte:fragment>
<svelte:fragment slot="trail">
<Avatar initials="KF" width="w-10" background="bg-primary-500" />
</svelte:fragment>
</AppBar>
</svelte:fragment>
<svelte:fragment slot="sidebarLeft">
<Navigation />
</svelte:fragment>
<!-- Router Slot -->
<div class="container p-10 mx-auto">
<slot />
</div>
<!-- ---- / ---- -->
<!-- <svelte:fragment slot="footer">Footer</svelte:fragment> -->
</AppShell>