Added syntax highlighting and copy button for code and pre
Some checks failed
Build, Tag, Push Docker Image / build (push) Has been cancelled
Create Release / Generate Release (push) Has been cancelled

This commit is contained in:
Mia Rose Winter 2024-03-18 13:21:06 +01:00
parent 54fae07a58
commit eed9ed554d
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
6 changed files with 44 additions and 11 deletions

View file

@ -90,6 +90,32 @@
}
</div>
<template id="copyButtonTemplate">
<button class="btn btn-sm btn-accent btn-square absolute top-2 right-2" title="copy">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
</svg>
</button>
</template>
<script>
async function copyCode(event) {
const container = event.srcElement.closest("div").querySelector("code, pre");
let text = container.innerText;
await navigator.clipboard.writeText(text);
}
document.querySelectorAll(".prose pre, .prose code").forEach((block) => {
// only add a button if browser supports Clipboard API
if (navigator.clipboard) {
block.parentElement.classList.add("relative");
const copyButton = document.getElementById("copyButtonTemplate").content.firstElementChild;
let button = copyButton.cloneNode(true);
button.addEventListener("click", copyCode);
block.parentElement.appendChild(button);
}
});
</script>
@code {
[Parameter]
public required Article Article { get; set; }

View file

@ -1,7 +1,7 @@
using Markdig;
using Markdig.Extensions.MediaLinks;
using Microsoft.AspNetCore.Components;
using Wave.Data;
using Markdown.ColorCode;
namespace Wave.Utilities;
@ -18,9 +18,10 @@ public static class MarkdownUtilities {
AddControlsProperty = true,
Class = "max-w-full"
})
.UseColorCode()
.DisableHtml()
.Build();
return Markdown.ToHtml(markdown, pipeline);
return Markdig.Markdown.ToHtml(markdown, pipeline);
}
public static MarkupString ParseToMarkup(string markdown) {

View file

@ -16,7 +16,8 @@
<PackageReference Include="Humanizer.Core.uk" Version="2.14.1" />
<PackageReference Include="Magick.NET-Q8-AnyCPU" Version="13.5.0" />
<PackageReference Include="MailKit" Version="4.3.0" />
<PackageReference Include="Markdig" Version="0.34.0" />
<PackageReference Include="Markdig" Version="0.36.2" />
<PackageReference Include="Markdown.ColorCode" Version="2.2.1" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="8.0.2" />
<PackageReference Include="Microsoft.AspNetCore.DataProtection.StackExchangeRedis" Version="8.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="8.0.0" />

View file

@ -49,6 +49,7 @@ module.exports = {
bold: '700'
},
borderRadius: {
'none': 0,
DEFAULT: '0.1rem',
'md': '0.2rem',
'lg': '0.35rem',

View file

@ -44,4 +44,8 @@ @layer components {
-webkit-mask-image: linear-gradient(black, black 80%, rgba(0, 0, 0, 0.5) 85%, transparent 100%);
mask-image: linear-gradient(black, black 80%, rgba(0, 0, 0, 0.5) 85%, transparent 100%);
}
.prose pre, .prose code {
@apply bg-neutral-200 text-black rounded-none border-current border-2;
}
}

File diff suppressed because one or more lines are too long