HighlightDomyślnie Highlight js nie obsługuje składni HTML Razor, która występuje w ASP.NET MVC.

Na szczęście ktoś już rozwiązał ten problem.

 http://www.namedquery.com/project/razor-language-pack-highlight-js

A ja opiszę te rozwiązanie. Gdyż na tej stronie nie mogłem znaleźć instrukcji co trzeba zrobić krok po kroku.

Sam kod zdobyłem wciskając F12 w Google Chrome i zabierając interesujący mnie fragment skryptu JavaScript.

Aby dodać obsługę kodu “razor” do skryptu “highlight.pack.js” trzeba dodać następujący kod JavaScript. Ja go dodałem przed deklaracją składni “objective-c”.

hljs.registerLanguage("razor", function (b) {
    var a = "foreach|0 var|0 if|0 in|0 else|0 model|0 using|0 false|0true|0 null|0 int|0 for|0 double|0 decimal|0 float|0 string|0 new|0";
    return { k: a, c: [{ cN: "built_in", b: "Html|Scripts|RenderBody|RenderSection|Styles" }, { cN: "comment", b: "@[*]", e: "[*]@" }, { cN: "start", b: /[@][?\\w]*/, i: /[@][{*]/ }, { cN: "string", b: '"((?!@))', e: '"', i: "\\n" }, { b: "<", e: ">", i: "</?", sL: "xml", c: [{ b: '"@', e: '"', sL: "razor" }] }] }
});


hljs.registerLanguage("objectivec", function (e) {

Do styli CSS trzeba dodać następujący styl globalny. Nie ważne jaki styl kolorowania składni wybierzemy znak małpy określający początek wyrażenia Razor powinien być podkreślony na żółto.

.razor .hljs-start {
    background-color: yellow;
    color: black;
}

Gdy chcemy użyć tej składni  piszemy klasę CSS “Razor”.

<pre><code class="hljs razor">@model TestModel 
@{ 
    Layout = &quot;_layout.cshtml&quot;;
    ViewBag.Title = &quot;Test&quot;; 
}
</code></pre>

Oto jak użycie składni w praktyce.

@model TestModel 
@{ 
    Layout = "_layout.cshtml";
    ViewBag.Title = "Test"; 
} 
@Scripts.Render("~/bundles/vendors")
@Styles.Render("~/bundles/my")
@* Comment *@ 
@Html.GoogleMaps("Ziomek") 
@* Multi 
   Line
   Comment *@ 
@{ 
    var test = 0; 
<p>Coś tam coś tam</p> 
<div> 
<a href="/test/">Link</a> 
    </div>
}
@foreach (var test in Model) {
<p>@test.Item</p> 
} 
@if (true) { 
<p>@test.Item</p> 
} else { 
<p>nope</p> 
} 
<p>@Html.TextBoxFor(p => p.FirstName)</p> 
@Html.Action("_Aside", Model); 
@using (Html.BeingForm("Index", "Home")) { 
    @Html.AntiForgeryToken() 
    @Html.TextBoxFor(p => p.LastName) 
<input type="Submit" value="@if(true){><text>true</text>}" /> 
}
<input disabled="@model.BooleanValue" type="text" />