Prettyprint format not styling code correctly

Question

I'm thinking about adding a blog to my site, so I'm using Prettyprint to style the code, problem is the styling is not displaying correctly as can be seen by the image.

line 1 is blank and the last 2 lines are blank and 2nd line is to far to the right.

I tried to write some code in jQuery but it to aggressive and removed all the indents.

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

As image below shows

So does anyone know how to remove the empty lines and pull 2nd line to left

Controller Code and partial

[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>

We need to see the code where prettyprint is inserted into the HTML; I suspect it is an artefact of some templating system, where you have whitespace between <pre> tag and the markup generated by prettyprint. — Amadan
– Amadan, Commented Nov 7, 2018 at 8:44
Hi Amadam, the input is from a textarea in CMS, I tried adding the html, but it did not format correctly on Stackoverflow — Paul Thompson
– Paul Thompson, Commented Nov 7, 2018 at 8:47
Just saying it is coming from textarea doesn't help, unfortunately. As for SO formatting - any code should either be indented four spaces (block code - you can do that automatically by selecting it and hitting Ctrl-K, or Cmd-K on Mac), or be surrounded by backticks, `` like this `` (especially HTML). — Amadan
– Amadan, Commented Nov 7, 2018 at 8:49
No, you misunderstand - not the final HTML code of the page. I wanted to see how this code was generated. How you use this library (the name is too generic so I have no idea what it is). What you did in order to integrate it with your blog. The source code, if you will. — Amadan
– Amadan, Commented Nov 7, 2018 at 8:53

Amadan · Accepted Answer · 2018-11-07 09:03:23Z

Squash this:

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

into this:

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

<pre> is preserving whitespace for you (which is critical for code, because otherwise you would not be able to have indent). However, this includes the whitespace you leave between <pre> and the content, and the content and </pre>. For example, you were wondering why there are two blank lines after the code. It is because you have one newline between ...Trim() and </code>, and then another newline between </code> and </pre>.

Tl;dr: Whenever you use <pre>, remember to remove any whitespace that you do not wish to see in the web page.

Collectives™ on Stack Overflow

Prettyprint format not styling code correctly

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related