如何在剃须刀页面中显示代码片段答案

【问题标题】：How to show snippets of code in razor page如何在剃须刀页面中显示代码片段
【发布时间】：2022-02-14 08:10:01
【问题描述】：

我正在 Blazor 中构建 Xamarin 应用程序的文档页面，但遇到了问题。我想使用剃须刀页面在页面上显示代码 sn-ps。到目前为止，我对 C# 代码没有那么大的问题，例如 App.xaml.cs：

public App()
   {
     InitializeComponent();
   }

对于这样的事情 - 我没有任何问题。我可以使用 CSS 或 MudBlazor（我也在使用）正确地将其样式设置为 <code> 标签。此外，IDE 不会将其识别为内部代码。然而问题在于：

a) 我正在尝试添加 XAML 代码/标签

b) 我正在尝试从 Xamarin 添加一些 C# 方法，它们包含标签，例如：

_container.Resolve<WebService> ...

所以 IDE 将 <WebService> 识别为 Blazor 应用程序中的内容。

当然，我已经尝试使用 <code> 块但没有成功。有什么办法让它工作吗？我真的需要在文档中展示这些，所以我现在是死角。

【问题讨论】：

请将你失败的例子展示给blazorfiddle.com，我会看看。我刚刚尝试了 @("_container.Resolve<webservice>")</webservice> 并且渲染正确。
@BaneBojanić 谢谢，我尝试过并为该特定示例工作。但是对于 XAML 代码 sn-p，它不起作用。这是小提琴：blazorfiddle.com/s/npcpt230
这样可以吗？ blazorfiddle.com/s/ju09qgj2
@BaneBojanić 看起来不错，但有什么解决方案如果我想包含它与应用程序中的完全一样？所以基本上就像你的风格一样： white-space: pre 包括换行符？我找到了使用 < 的解决方案和>作为替代品，但我想知道是否有更好的替代品。

标签： c# html css razor blazor

【解决方案1】：

您必须转义引号。我还添加了一些 \r\n 和 \t 来演示使用 <pre> 进行格式化

@page "/"
<pre>
    <code>@someString</code>
</pre>
@code {
      string someString = "<Application.Resources>\r\n\t<Color x:Key=\"PrimaryText\">#777777</Color><Application.Resources>";
}

Fiddle

【讨论】：

这简直太完美了。我还找到了用 < 替换开始标签的解决方案。签名，我也能够成功地在页面上显示它。但是 - 我可能会使用您的解决方案。谢谢！