如何在“剃刀”视图中显示剃刀和html代码片段

Question

我正在创建一个具有自定义组件的网站，我需要在其中显示这些组件的Html和Razor代码段，以便其他人可以复制它们。

例如，如果视图中的组件如下：

<div class="k-content">
     @(Html.Kendo().DatePicker()
                    .Name("datepicker")
                    .Value("05/12/2018")
    )
</div>

我希望能够准确显示视图中的编码方式，因此视图将看起来相同。这样，有人可以看到代码，然后将其复制并粘贴到视图中。

我尝试使用前置标签，但这不起作用。我能够做到的唯一方法是使用工具对<标签和>标签进行编码。见下文：

<pre>
    &lt;div class="k-content"&gt;
        &nbsp;&#x40;(Html.Kendo().DatePicker()
        .Name("datepicker")
        .Value("05/12/2018"))
    &lt;/div&gt;
</pre>

有更好的方法吗？有一个优雅的解决方案吗？