Added syntax highlighting and copy button for code and pre
This commit is contained in:
parent
54fae07a58
commit
eed9ed554d
|
@ -47,7 +47,7 @@
|
||||||
</SectionContent>
|
</SectionContent>
|
||||||
|
|
||||||
<article class="mb-6">
|
<article class="mb-6">
|
||||||
<div class="prose prose-neutral max-w-none hyphens-auto text-justify">
|
<div class="prose prose-neutral max-w-none hyphens-auto text-justify">
|
||||||
@Content
|
@Content
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
@ -82,14 +82,40 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
<div class="flex gap-2 flex-wrap">
|
<div class="flex gap-2 flex-wrap">
|
||||||
@if (string.IsNullOrWhiteSpace(Article.Author.AboutTheAuthor)) {
|
@if (string.IsNullOrWhiteSpace(Article.Author.AboutTheAuthor)) {
|
||||||
<ProfilePill Profile="Article.Author" RoleTag="@Localizer["Author"]"/>
|
<ProfilePill Profile="Article.Author" RoleTag="@Localizer["Author"]"/>
|
||||||
}
|
}
|
||||||
@if (Article.Reviewer is not null && Article.Reviewer.Id != Article.Author.Id) {
|
@if (Article.Reviewer is not null && Article.Reviewer.Id != Article.Author.Id) {
|
||||||
<ProfilePill Profile="Article.Reviewer" RoleTag="@Localizer["Reviewer"]"/>
|
<ProfilePill Profile="Article.Reviewer" RoleTag="@Localizer["Reviewer"]"/>
|
||||||
}
|
}
|
||||||
</div>
|
</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 {
|
@code {
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public required Article Article { get; set; }
|
public required Article Article { get; set; }
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
using Markdig;
|
using Markdig;
|
||||||
using Markdig.Extensions.MediaLinks;
|
using Markdig.Extensions.MediaLinks;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using Wave.Data;
|
using Markdown.ColorCode;
|
||||||
|
|
||||||
namespace Wave.Utilities;
|
namespace Wave.Utilities;
|
||||||
|
|
||||||
|
@ -18,9 +18,10 @@ public static class MarkdownUtilities {
|
||||||
AddControlsProperty = true,
|
AddControlsProperty = true,
|
||||||
Class = "max-w-full"
|
Class = "max-w-full"
|
||||||
})
|
})
|
||||||
|
.UseColorCode()
|
||||||
.DisableHtml()
|
.DisableHtml()
|
||||||
.Build();
|
.Build();
|
||||||
return Markdown.ToHtml(markdown, pipeline);
|
return Markdig.Markdown.ToHtml(markdown, pipeline);
|
||||||
}
|
}
|
||||||
|
|
||||||
public static MarkupString ParseToMarkup(string markdown) {
|
public static MarkupString ParseToMarkup(string markdown) {
|
||||||
|
|
|
@ -16,7 +16,8 @@
|
||||||
<PackageReference Include="Humanizer.Core.uk" Version="2.14.1" />
|
<PackageReference Include="Humanizer.Core.uk" Version="2.14.1" />
|
||||||
<PackageReference Include="Magick.NET-Q8-AnyCPU" Version="13.5.0" />
|
<PackageReference Include="Magick.NET-Q8-AnyCPU" Version="13.5.0" />
|
||||||
<PackageReference Include="MailKit" Version="4.3.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.Authentication.OpenIdConnect" Version="8.0.2" />
|
||||||
<PackageReference Include="Microsoft.AspNetCore.DataProtection.StackExchangeRedis" Version="8.0.1" />
|
<PackageReference Include="Microsoft.AspNetCore.DataProtection.StackExchangeRedis" Version="8.0.1" />
|
||||||
<PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="8.0.0" />
|
<PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="8.0.0" />
|
||||||
|
|
|
@ -49,6 +49,7 @@ module.exports = {
|
||||||
bold: '700'
|
bold: '700'
|
||||||
},
|
},
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
|
'none': 0,
|
||||||
DEFAULT: '0.1rem',
|
DEFAULT: '0.1rem',
|
||||||
'md': '0.2rem',
|
'md': '0.2rem',
|
||||||
'lg': '0.35rem',
|
'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%);
|
-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%);
|
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