bennymi / svhighlight

A code syntax highlighter for Svelte using highlight.js, with line blur, highligthing, and focus buttons. The component can be easily customized with Tailwind CSS.
https://svhighlight.vercel.app
MIT License
59 stars 2 forks source link

Line Spacing Problem #6

Open Hi-ImKyle opened 1 year ago

Hi-ImKyle commented 1 year ago

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>
bennymi commented 1 year ago

Thanks for creating an issue @Hi-ImKyle . I'm assuming this has something to do with using the library together with Skeleton, but not entirely sure what's causing it at the moment. I'll look into it