Question

我正在考虑将博客添加到我的网站，因此我正在使用Prettyprint来设置代码样式，问题是样式无法正确显示，如图像所示。

第一行是空白，最后两行是空白，第二行在最右边。

我试图在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>

Answer 1

南瓜：

<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>之间留出的空白。例如，您想知道为什么在代码后有两个空白行。这是因为您在...Trim()和</code>之间有一个换行符，然后在</code>和</pre>之间有另一个换行符。

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

Prettyprint格式无法正确设置代码样式

1 个答案: