Add dist folder

Author: romanresh

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [2.1.0] - 2021-04-14
+- Add the dist directory, and a minified version of the script
+
 ## [2.0.1] - 2021-03-02
 ### Fixed
 - Fix inline razor blocks inside tag attributes (inside double quotes)

README.md

@@ -6,28 +6,39 @@ CSHTML is a markup language created by Microsoft for ASP.NET MVC and ASP.NET Cor
 
 For more about the CSHTML Razor syntax here: https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor.
 
-### Usage
+## Usage
 
-Simply include the `highlight.js` script package in your webpage or node app, load up this module and apply it to `hljs`.
+Simply include the `Highlight.js` library in your webpage or Node app, then load this module.
 
-If you're not using a build system and just want to embed this in your webpage:
+### Static website or simple usage
+Simply load the module after loading Highlight.js. You'll use the minified version found in the dist directory. This module is just a CDN build of the language, so it will register itself as the Javascript is loaded.
 
 ```html
-<script src="/path/to/highlight.js/highlight.pack.js"></script>
-<script src="/path/to/highlightjs-cshtml-razor/cshtml-razor.js"></script>
+<script type="text/javascript" src="/path/to/highlight.min.js"></script>
+<script type="text/javascript" src="/path/to/highlightjs-cshtml-razor/dist/cshtml-razor.min.js"></script>
 <script>
     hljs.registerLanguage('cshtml-razor', window.hljsDefineCshtmlRazor);
     hljs.initHighlightingOnLoad();
 </script>
 ```
 
-If you're using webpack / rollup / browserify / node:
+### Using directly from the UNPKG CDN
+
+Add the following script tag in your page:
+
+```html
+<script type="text/javascript" src="https://unpkg.com/highlightjs-cshtml-razor/dist/cshtml-razor.min.js"></script>
+```
+
+### With Node or another build system
+
+If you're using Node / Webpack / Rollup / Browserify, etc, simply require the language module, then register it with Highlight.js.
 
 ```javascript
-var hljs = require('highlight.js');
-var hljsDefineCshtmlRazor = require('highlightjs-cshtml-razor');
+var hljs = require('highlightjs');
+var hljsRazor = require('highlightjs-cshtml-razor');
 
-hljsDefineCshtmlRazor(hljs);
+hljs.registerLanguage("highlightjs-cshtml-razor", hljsRazor);
 hljs.initHighlightingOnLoad();
 ```
 

package-lock.json

@@ -1,8 +1,8 @@
 {
   "name": "highlightjs-cshtml-razor",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "highlight.js syntax definition for ASP.NET Razor CSHTML language",
-  "main": "cshtml-razor.js",
+  "main": "src/cshtml-razor.js",
   "scripts": {
     "test": "./node_modules/.bin/mocha --reporter spec"
   },
@@ -37,5 +37,7 @@
     "mocha": "^5.2.0",
     "should": "^13.2.3"
   },
-  "dependencies": {}
+  "dependencies": {
+    "minimist": "^1.2.5"
+  }
 }

package.json

@@ -189,14 +189,15 @@ function hljsDefineCshtmlRazor(hljs) {
         ]
     };
     var xml_blocks = getXmlBlocks(hljs, [razor_inline_expresion, razor_parentheses_block]);
+    var razor_directives_prefix = "^\\s*@(page|model|using|inherits|inject|layout)";
     var razor_directives = {
-        begin: "^\\s*@(page|model|using|inherits|inject)[^\\r\\n{\\(]*$",
+        begin: razor_directives_prefix + "[^\\r\\n{\\(]*$",
         end: "$",
         returnBegin: true,
         returnEnd: true,
         contains: [
             {
-                begin: "^\\s*@(page|model|using|inherits|inject)",
+                begin: razor_directives_prefix,
                 className: SPECIAL_SYMBOL_CLASSNAME
             },
             {

cshtml-razor.js src/cshtml-razor.jscshtml-razor.js renamed to src/cshtml-razor.js

@@ -9,8 +9,8 @@
         <title></title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="../node_modules/highlightjs/styles/default.css">
-        <script type="text/javascript" src="../node_modules/highlightjs/highlight.pack.js"></script>
+        <link rel="stylesheet" href="../node_modules/highlight.js/styles/default.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
         <script type="text/javascript" src="../cshtml-razor.js"></script>
         <script type="text/javascript">
             hljs.registerLanguage('cshtml-razor', window.hljsDefineCshtmlRazor);
@@ -19,18 +19,21 @@
     </head>
     <body>
         <pre><code class="hljs cshtml">
-            before
-            @{
-                var inCSharp = true;
-                @&lt;text&gt;xml&lt;/text&gt;
-                &lt;div class="foo"&gt;content&lt;/div&gt;
-            }
-            after
-            @{
-                var inCSharp = true;
-                &lt;text&gt;xml&lt;/text&gt;
-            }
-            &lt;div class="foo"&gt;content&lt;/div&gt;
+            @using System.Threading
+            @using System.Threading.Tasks
+            @using System.Net.Http
+            @using System.Text.Json
+            &lt;DxDataGrid T="@WebApiOrder" CustomData="@LoadOrderData("foo")" ShowFilterRow="true"&gt;
+                &lt;Columns&gt;
+                    &lt;DxDataGridComboBoxColumn T="@(WebApiCustomerLookup)" TextFieldName="Text" ValueFieldName="Value"
+                                            CustomData="@LoadCustomerData" Field="@nameof(WebApiOrder.CustomerID)" Width="300px" /&gt;
+                    &lt;DxDataGridDateEditColumn Field="@nameof(WebApiOrder.OrderDate)" Width="180px" /&gt;
+                    &lt;DxDataGridSpinEditColumn Field="@nameof(WebApiOrder.Freight)" DisplayFormat="c" Width="180px" /&gt;
+                    &lt;DxDataGridColumn Field="@nameof(WebApiOrder.ShipCountry)" Width="210px" /&gt;
+                    &lt;DxDataGridComboBoxColumn T="@(WebApiShipperLookup)" TextFieldName="Text" ValueFieldName="Value"
+                                            CustomData="@LoadShipmentData" Field="@nameof(WebApiOrder.ShipVia)" Width="220px" /&gt;
+                &lt;/Columns&gt;
+            &lt;/DxDataGrid&gt;
         </code></pre>
         <pre><code class="hljs cshtml">
             @if(true) {

test/index.html

@@ -3,7 +3,7 @@ var promisify = require("util").promisify;
 let path = require('path');
 let hljs = require("highlight.js");
 const fs = require("fs");
-let hljsDefineCshtmlRazor = require("../cshtml-razor");
+let hljsDefineCshtmlRazor = require("../src/cshtml-razor");
 
 const readdir = promisify(fs.readdir),
       readFile = promisify(fs.readFile);