时间戳

首页 > 解决方案 > Prettyprint 格式的代码样式不正确

jquery - Prettyprint 格式的代码样式不正确

问题描述

我正在考虑在我的网站上添加一个博客，所以我使用 Prettyprint 来设置代码样式，问题是样式显示不正确，如图像所示。

在此处输入图像描述

第 1 行为空白，最后 2 行为空白，第 2 行在最右侧。

我尝试在 jQuery 中编写一些代码，但它过于激进并删除了所有缩进。

$(document).ready(function () {
    $(".prettyprint").each(function (index, element) {
        element.textContent = element.textContent.replace(/^\s+/mg, "");
    });
});

如下图所示

在此处输入图像描述

那么有谁知道如何删除空行并将第二行拉到左边

控制器代码和部分 

[ChildActionOnly]
        public ActionResult DisplayCode(IEnumerable<IPublishedContent> comps)
        {
            var components = comps;

            CodeBlock subModel = null;

            foreach (var item in components)
            {

                string codeBlockText = item.GetPropertyValue<string>("codeBlock", "No Code Found");

                subModel = new CodeBlock
                {
                    TextString = codeBlockText
                };
            }

            var primaryModel = new NestedContentViewModel
            {
                DisplayCodeBlock = subModel
            };
            return PartialView("~/Views/Partials/pvCodeBlock.cshtml", primaryModel);
        }

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <pre class="prettyprint linenums:1">
                <code>
                    @Model.DisplayCodeBlock.TextString.Trim()
                </code>
                </pre>
        </div>
    </div>
</div>

标签： jquery

解决方案

南瓜这个：

<pre class="prettyprint linenums:1">
    <code>
        @Model.DisplayCodeBlock.TextString.Trim()
    </code>
</pre>

进入这个：

<pre class="prettyprint linenums:1"><code>@Model.DisplayCodeBlock.TextString.Trim()</code></pre>

<pre>正在为您保留空格（这对代码至关重要，否则您将无法缩进）。但是，这包括您在内容之间留下的空白<pre>，以及内容和</pre>. 例如，您想知道为什么代码后面有两个空行。这是因为在 and 之间有一个换行符...Trim()，</code>然后在</code>and之间有另一个换行符</pre>。

Tl;dr：每当您使用<pre>时，请记住删除您不希望在网页中看到的任何空白。

推荐阅读