svhighlight icon indicating copy to clipboard operation
svhighlight copied to clipboard

Line Spacing Problem

Open Hi-ImKyle opened this issue 1 year ago • 1 comments

Mentioned to create an issue, so here it is.

image

//
<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>

Hi-ImKyle avatar Apr 25 '23 16:04 Hi-ImKyle