<pre> tag isn&#39;t preserving white space in display

Question

After downloading the SyntaxHighliter Nuget Package in Visual Studio 2017, my pre tag isn't preserving the white space before and after the code I'd like to display in my modal. Sometimes it displays one space before if I give 3 lines of space in the HTML code and sometimes it gives one space if I hit the spacebar 5 times on the line before the code. What is causing this issue?

Here are the stylesheets and scripts that I'm using for styling the displayed code:

<link href="~/Content/SyntaxHighlighter/shCore.css" rel="stylesheet" />
<link href="~/Content/SyntaxHighlighter/shThemeRDark.css" rel="stylesheet" />
<link href="~/Content/SyntaxHighlighter/shCoreRDark.css" rel="stylesheet" />

<script src="~/Scripts/SyntaxHighlighter/shCore.js"></script>
<script src="~/Scripts/SyntaxHighlighter/shBrushJScript.js"></script>
<script>
    SyntaxHighlighter.all();
</script>

HTML Code (one space before and after function capitalizeWord())

                                        <pre class="brush: js">

function capitalizeWord() {
    var rawString = document.getElementById("capitalizetext").value;
    var stringArr = rawString.split(" ");
    var capitalArr = []
    for (i = 0; i < stringArr.length; i++) {
        capitalArr.push(stringArr[i].charAt(0).toUpperCase() + stringArr[i].slice(1));
    }
    document.getElementById("capitalizeresult").innerHTML = capitalArr.join(" ");
}

                                        </pre>

Display (doesn't have a space before and after code)

Answer 1

检查您的重置样式表，它可能已覆盖默认样式