Added syntax highlighting and copy button for code and pre
This commit is contained in:
parent
54fae07a58
commit
eed9ed554d
|
@ -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; }
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -49,6 +49,7 @@ module.exports = {
|
|||
bold: '700'
|
||||
},
|
||||
borderRadius: {
|
||||
'none': 0,
|
||||
DEFAULT: '0.1rem',
|
||||
'md': '0.2rem',
|
||||
'lg': '0.35rem',
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
2
Wave/wwwroot/css/main.min.css
vendored
2
Wave/wwwroot/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue