@using System.IO
@using AngleSharp
@using AngleSharp.Html
@using AngleSharp.Html.Parser
@model VmMumble
@inject Microsoft.Extensions.Configuration.IConfiguration Configuration
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>preview</title>
<link rel="stylesheet" href="@(Configuration["CDNBaseAddress"])/lib/editor.md/css/editormd.min.css" />
<link href="@(Configuration["CDNBaseAddress"])/lib/highlight/styles/a11y-dark.min.css" rel="stylesheet" />
<link href="@(Configuration["CDNBaseAddress"])/css/frame-dark.css" rel="stylesheet"/>
<script src="@(Configuration["CDNBaseAddress"])/lib/jquery/jquery.min.js"></script>
<script src="@(Configuration["CDNBaseAddress"])/lib/highlight/highlight.min.js"></script>
<script src="@(Configuration["CDNBaseAddress"])/lib/editor.md/editormd.min.js"></script>
<script src="@(Configuration["CDNBaseAddress"])/lib/editor.md/lib/marked.min.js"></script>
<script src="@(Configuration["CDNBaseAddress"])/lib/editor.md/lib/prettify.min.js"></script>
<script src="@(Configuration["CDNBaseAddress"])/lib/editor.md/lib/raphael.min.js"></script>
<script src="@(Configuration["CDNBaseAddress"])/lib/editor.md/lib/underscore.min.js"></script>
<script src="@(Configuration["CDNBaseAddress"])/lib/editor.md/lib/sequence-diagram.min.js"></script>
<script src="@(Configuration["CDNBaseAddress"])/lib/editor.md/lib/flowchart.min.js"></script>
<script src="@(Configuration["CDNBaseAddress"])/lib/editor.md/lib/jquery.flowchart.min.js"></script>
</head>
<body>
<div style="width: 99%;margin:0 auto;">
@{
var context = BrowsingContext.New(AngleSharp.Configuration.Default);
var parser = context.GetService<IHtmlParser>();
var html = await parser.ParseDocumentAsync(Model.HtmlContent);
TextWriter text = new StringWriter();
html.ToHtml(text, new PrettyMarkupFormatter());
}
<pre style="padding: 0; max-height: 600px;overflow-y: auto;width: 100%;margin-bottom: 15px;white-space: pre-wrap;font-size: 16px;font-weight: bold"><code class="lang-xml">@text</code></pre>
<div style="border:1px solid;padding: 20px">
<div id="editor" style="width: 100%;margin: 0 auto;padding: 10px" class="editormd-preview-theme-dark">
<textarea style="display: none;">@Model.Markdown</textarea>
</div>
</div>
</div>
<script>
$(function () {
document.querySelectorAll("pre code").forEach((block) => {
hljs.highlightElement(block);
});
editormd.markdownToHTML("editor", {
htmlDecode: "style,script,iframe",
emoji: true,
taskList: true,
tex: true,
flowChart: true,
sequenceDiagram: true
});
});
</script>
</body>
</html>