feat: configure syntax highlighting

This commit is contained in:
Max Richter
2025-09-30 21:01:26 +02:00
parent 2a1572f99d
commit c2179c6d22
8 changed files with 72 additions and 11 deletions

View File

@@ -1 +1,6 @@
@import 'tailwindcss';
.cm-foldGutter + .cm-foldGutter {
display: none !important;
}

View File

@@ -3,6 +3,7 @@
import MinusCircleIcon from '$lib/icons/MinusCircleIcon.svelte';
import XCircleIcon from '$lib/icons/XCircleIcon.svelte';
import type { Extension } from '@codemirror/state';
import { githubLight } from '@fsegurai/codemirror-theme-github-light';
import { basicSetup } from 'codemirror';
import type { Snippet } from 'svelte';
import CodeMirror from 'svelte-codemirror-editor';
@@ -48,7 +49,7 @@
<MinusCircleIcon class="mr-2 h-5 w-5 text-gray-400" />
{/if}
<div class="flex-1">
<h2 class="flex items-center text-sm font-semibold uppercase tracking-wide text-gray-900">
<h2 class="flex items-center text-sm font-semibold tracking-wide text-gray-900 uppercase">
{title}
{#if pillText}
<span
@@ -81,6 +82,7 @@
<CodeMirror
bind:value
extensions={[basicSetup, langExtension].filter(Boolean) as Extension[]}
theme={githubLight}
{placeholder}
{readonly}
class="text-sm"

View File

@@ -92,7 +92,6 @@ My favourite baguette recipe
const result = templateValue
? parseMarkdownWithTemplate(markdownValue, templateValue)
: parseMarkdown(markdownValue);
console.log({ result });
if ('error' in result) {
jsonOutput = '';
@@ -107,12 +106,13 @@ My favourite baguette recipe
}
} else {
templateError = undefined;
jsonOutput = JSON.stringify(result.data, null, 2);
jsonOutput = JSON.stringify(result, null, 2);
timings = result.timings;
templateStatus = 'success';
dataStatus = 'success';
}
} catch (e: unknown) {
console.log({ e });
jsonOutput = (e as Error).message;
timings = null;
if (jsonOutput.startsWith('failed to compile template')) {
@@ -154,7 +154,7 @@ My favourite baguette recipe
{#snippet headerActions()}
<select
onchange={(e) => loadTemplate(e.currentTarget.value)}
class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
>
<option value="">Load a template</option>
{#each templates as template (template)}
@@ -175,7 +175,7 @@ My favourite baguette recipe
{#snippet headerActions()}
<button
onclick={resetMarkdown}
class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
>
Reset
</button>