fix: changed formatter

This commit is contained in:
Théo 2023-09-13 17:23:43 +02:00
parent 5aea6d3340
commit 0c17a572da

View file

@ -1,15 +1,17 @@
<script lang="ts">
import { enhance } from '$app/forms';
import type { PageData } from './$types';
import { marked, type MarkedOptions } from 'marked';
import { enhance } from '$app/forms';
import Button from '$lib/components/ui/Button.svelte';
import Input from '$lib/components/ui/Input.svelte';
import { page } from '$app/stores';
export let data: PageData;
$: puzzle = data.puzzle;
$: chapterId = $page.params.chapterId;
const renderer = new marked.Renderer();
@ -21,30 +23,32 @@
);
};
renderer.br = () => {
return '<br /><br />';
};
renderer.codespan = (code) => {
return `<code class="cursor-default select-none text-transparent transition-colors delay-150 hover:text-highlight-secondary">${code}</code>`;
};
const options: MarkedOptions = {
breaks: false,
breaks: true,
renderer,
gfm: true
};
</script>
<div class="flex h-full w-full flex-col justify-between space-y-4">
<div class="flex h-full w-full flex-col justify-between gap-4">
<h1 class="text-2xl font-bold sm:text-3xl md:text-4xl">
{puzzle.name}
<span class="text-xl text-highlight-secondary">({puzzle.scoreMax} points)</span>
</h1>
<!-- <Separator /> -->
<div class="h-screen w-full overflow-y-auto font-fira">
<div class="h-screen w-full overflow-y-auto break-all font-fira text-xs sm:text-base">
{@html marked(puzzle.content, options)}
</div>
{#if !puzzle.score}
<!-- <InputForm {puzzle} /> -->
<form
class="flex w-full flex-col items-end justify-between gap-4 sm:flex-row"
class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row"
method="POST"
enctype="multipart/form-data"
use:enhance
@ -62,8 +66,8 @@
<Button class="w-full sm:w-44" variant="brand">Valider</Button>
</form>
{:else}
<div class="flex items-center justify-between">
<div class="items-center gap-2">
<div class="flex items-center justify-between flex-col sm:flex-row gap-2">
<div class="flex items-center gap-2">
<p>
Tentative{puzzle.tries && puzzle.tries > 1 ? 's' : ''} :{' '}
<span class="text-brand-accent">{puzzle.tries}</span>
@ -75,7 +79,7 @@
<!-- <Button type="button" onClick={() => router.push(getURL(`/dashboard/puzzles`))}>
Retour aux puzzles
</Button> -->
<Button href="/puzzles" class="w-full sm:w-44" variant="brand">Retour aux puzzles</Button>
<Button href="/dashboard/chapters/{chapterId}" class="w-full sm:w-44" variant="brand">Retour aux puzzles</Button>
</div>
{/if}
</div>