feat: implement custom CLI lang for Prism

Author: rigor789

.vitepress/config.js

@@ -3,8 +3,11 @@ const {
 	codeBlocksPlugin,
 	markFlavorHeadings,
 	wrapFlavorContainersInTabs,
+	setupPrismCLILang,
 } = require('./theme/nativescript-theme/plugins')
 
+setupPrismCLILang()
+
 module.exports = {
 	lang: 'en-US',
 	title: 'NativeScript',

.vitepress/theme/nativescript-theme/plugins/index.js

@@ -1,6 +1,6 @@
 'use strict'
 Object.defineProperty(exports, '__esModule', { value: true })
-exports.wrapFlavorContainersInTabs = exports.markFlavorHeadings = exports.createFlavorContainer = exports.codeBlocksPlugin = void 0
+exports.setupPrismCLILang = exports.wrapFlavorContainersInTabs = exports.markFlavorHeadings = exports.createFlavorContainer = exports.codeBlocksPlugin = void 0
 var code_blocks_1 = require('./code-blocks')
 Object.defineProperty(exports, 'codeBlocksPlugin', {
 	enumerable: true,
@@ -27,3 +27,10 @@ Object.defineProperty(exports, 'wrapFlavorContainersInTabs', {
 		return flavor_container_1.wrapFlavorContainersInTabs
 	},
 })
+var prism_lang_cli_1 = require('./prism-lang-cli')
+Object.defineProperty(exports, 'setupPrismCLILang', {
+	enumerable: true,
+	get: function () {
+		return prism_lang_cli_1.setupPrismCLILang
+	},
+})

.vitepress/theme/nativescript-theme/plugins/prism-lang-cli.js

@@ -0,0 +1,61 @@
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.setupPrismCLILang = void 0
+const prism = require('prismjs')
+function setupPrismCLILang() {
+	prism.languages.cli = {
+		comment: [/^#.*/gm, ...prism.languages.js.comment],
+		output: {
+			pattern: /^\$\:.*/gms,
+			greedy: true,
+			inside: {
+				hidden: /^\$\:/,
+			},
+		},
+		command: {
+			// pattern: /^(\S+)\s(.*)/gm,
+			pattern: /^(?:\$\s)?(?:.+\s\\(?:\r\n|\r|\n))*.+/gm,
+			inside: {
+				'command-line-break': {
+					pattern: /\s\\(?:\r\n|\r|\n)/,
+					alias: ['comment'],
+				},
+				'command-name': {
+					pattern: /^(?:\$\s)?(\S+)/g,
+					alias: ['keyword'],
+					inside: {
+						visual: /\$\s/,
+					},
+				},
+				'command-flag': {
+					pattern: /\s-\w\S*\s?/g,
+					inside: {
+						punctuation: /^-/,
+						bold: /\S+/,
+					},
+				},
+				'command-parameter': {
+					pattern: /\s--\S+([\s=]\S+)?/g,
+					inside: {
+						'command-parameter-name': {
+							pattern: /^(\s--)([\w-]+)/g,
+							lookbehind: true,
+							alias: ['bold'],
+						},
+						'command-parameter-value': {
+							pattern: /(\s|=)(?!-)(\S+)/,
+							lookbehind: true,
+							alias: ['function-name'],
+						},
+						punctuation: /(--|=)/,
+					},
+				},
+				'command-subcommand-name': {
+					pattern: /^\s\w\S*\s?/g,
+					alias: ['function'],
+				},
+			},
+		},
+	}
+}
+exports.setupPrismCLILang = setupPrismCLILang

.vitepress/theme/nativescript-theme/styles.css

@@ -2469,6 +2469,15 @@ div[class*='language-'].line-numbers-mode {
 	color: #e2e8f0;
 }
 
+.token.visual {
+	color: #64748b;
+	pointer-events: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
 .token.tag,
 .token.namespace {
 	color: #e879f9;

README.md

@@ -1,6 +1,6 @@
 Writing Guide from the Vue team we can refer to and follow: https://v3.vuejs.org/guide/contributing/writing-guide.html
 
-```shell
+```cli
 git clone https://github.com/NativeScript/docs-new.git
 npm i
 npm start

advanced-concepts.md

@@ -155,8 +155,9 @@ function generateNativeIOSHMAC() {
 
 5. Build your NativeScript application by running the following and you should see the base64encryptedKey print in your terminal.
 
-```bash
-ns clean && ns run ios --no-hmr
+```cli
+ns clean
+ns run ios --no-hmr
 ```
 
 ## iOS Marshalling

best-practices/ios-tips.md

@@ -10,20 +10,28 @@ For example:
 
 - **BAD**
 
-```
-let applePayController: PKPaymentAuthorizationViewController;
-
-applePayController = PKPaymentAuthorizationViewController.alloc().initWithPaymentRequest(paymentRequest);
-applePayController.delegate = PKPaymentAuthorizationViewControllerDelegateImpl.initWithOwner(this);
+```ts
+let applePayController: PKPaymentAuthorizationViewController
+
+applePayController = PKPaymentAuthorizationViewController.alloc().initWithPaymentRequest(
+  paymentRequest
+)
+applePayController.delegate = PKPaymentAuthorizationViewControllerDelegateImpl.initWithOwner(
+  this
+)
 ```
 
 - **GOOD**
 
-```
-let applePayController: PKPaymentAuthorizationViewController;
-let applePayControllerDelegate: PKPaymentAuthorizationViewControllerDelegateImpl;
-
-applePayController = PKPaymentAuthorizationViewController.alloc().initWithPaymentRequest(paymentRequest);
-applePayControllerDelegate = PKPaymentAuthorizationViewControllerDelegateImpl.initWithOwner(this);
-applePayController.delegate = applePayControllerDelegate;
+```ts
+let applePayController: PKPaymentAuthorizationViewController
+let applePayControllerDelegate: PKPaymentAuthorizationViewControllerDelegateImpl
+
+applePayController = PKPaymentAuthorizationViewController.alloc().initWithPaymentRequest(
+  paymentRequest
+)
+applePayControllerDelegate = PKPaymentAuthorizationViewControllerDelegateImpl.initWithOwner(
+  this
+)
+applePayController.delegate = applePayControllerDelegate
 ```

best-practices/listviews.md

@@ -10,28 +10,33 @@ ListView, RadListView and really any view component that utilizes some form of r
 
 Let's first look at a bad way to setup a ListView row template and why:
 
-```
+```xml
 <ListView items="{{ myTitles }}" class="list-group">
-    <ListView.itemTemplate>
-        <StackLayout>
-          <r:Render when="{{ !showSomethingElse }}">
-            <r:Render.template>
-              <StackLayout backgroundColor="lightblue">
-                <Label text="{{ title }}" textWrap="true" class="title" />
-              </StackLayout>
-            </r:Render.template>
-          </r:Render>
-          <r:Render when="{{ showSomethingElse }}">
-            <r:Render.template>
-              <GridLayout rows="auto,5,auto,5,auto" backgroundColor="red">
-                <Label text="{{ title }}" textWrap="true" class="title" />
-                <Label row="2" text="Something Else" textWrap="true" class="title" />
-                <Label row="4" text="Could show yet anything thing here" textWrap="true" class="title" />
-              </GridLayout>
-            </r:Render.template>
-          </r:Render>
-        </StackLayout>
-    </ListView.itemTemplate>
+  <ListView.itemTemplate>
+    <StackLayout>
+      <r:Render when="{{ !showSomethingElse }}">
+        <r:Render.template>
+          <StackLayout backgroundColor="lightblue">
+            <Label text="{{ title }}" textWrap="true" class="title" />
+          </StackLayout>
+        </r:Render.template>
+      </r:Render>
+      <r:Render when="{{ showSomethingElse }}">
+        <r:Render.template>
+          <GridLayout rows="auto,5,auto,5,auto" backgroundColor="red">
+            <Label text="{{ title }}" textWrap="true" class="title" />
+            <Label row="2" text="Something Else" textWrap="true" class="title" />
+            <Label
+              row="4"
+              text="Could show yet anything thing here"
+              textWrap="true"
+              class="title"
+            />
+          </GridLayout>
+        </r:Render.template>
+      </r:Render>
+    </StackLayout>
+  </ListView.itemTemplate>
 </ListView>
 ```
 
@@ -41,7 +46,7 @@ This is bad because it causes the creation and destruction of view elements whil
 
 ## Good setup
 
-```
+```xml
 <ListView items="{{ myTitles }}" class="list-group" itemTemplateSelector="{{selectItemTemplate}}">
   <ListView.itemTemplates>
     <template key="onelayout">

best-practices/native-class.md

@@ -10,13 +10,11 @@ There's a couple things to note about it's usage.
 
 When using the custom native class within the same file you can define it as follows:
 
-```
+```ts
 @NativeClass()
-class CustomClass extends NSObject {
-
-}
+class CustomClass extends NSObject {}
 
-const customClass = CustomClass.new();
+const customClass = CustomClass.new()
 ```
 
 This allows the code to be compiled naturally and will work as expected.
@@ -25,26 +23,22 @@ This allows the code to be compiled naturally and will work as expected.
 
 You can use setup methods in this case to mitigate any cross compilation issue, for example:
 
-```
-let customClass;
+```ts
+let customClass
 function setupCustomClass() {
   if (global.isAndroid) {
     @NativeClass()
-    class CustomClass extends android.view.View {
-
-    }
-    customClass = CustomClass;
+    class CustomClass extends android.view.View {}
+    customClass = CustomClass
   } else {
     @NativeClass()
-    class CustomClass extends NSObject {
-
-    }
-    customClass = CustomClass;
+    class CustomClass extends NSObject {}
+    customClass = CustomClass
   }
 }
 
-setupCustomClass();
-const myClass = new customClass(); // can handle different platform args with ternary if needed
+setupCustomClass()
+const myClass = new customClass() // can handle different platform args with ternary if needed
 ```
 
 The `global.isAndroid` conditional will get removed when building the app for iOS so your compiled code is clean and isolated while allowing you to handle in a single file.
@@ -53,15 +47,13 @@ The `global.isAndroid` conditional will get removed when building the app for iO
 
 Since the `@NativeClass()` decorator modifies the JS syntax to work with the NativeScript runtimes you want to ensure the symbol is exported properly when using that outside of the file it's defined. Here's how you can do that:
 
-```
+```ts
 // custom-class.ts
 @NativeClass()
-class CustomClass extends NSObject {
-
-}
+class CustomClass extends NSObject {}
 
-export { CustomClass };
+export { CustomClass }
 
 // usage.ts
-import { CustomClass } from './custom-class';
+import { CustomClass } from './custom-class'
 ```

best-practices/rogue-timers.md

@@ -10,7 +10,7 @@ One single timeout left unprotected or otherwise kept in check can lead to devas
 
 It's always recommended to track your timeouts and intervals and clean them up properly when no longer needed:
 
-```
+```ts
 this.myTimeout = setTimeout(() => {
   // something
 }, 2000);
@@ -26,7 +26,7 @@ cleanup() {
 
 Intervals are the worst case as they can go on forever eating up valuable device resources your app wants to provide a good user experience. In the most offending cases, they double up and continue to eat away at the UX of an app.
 
-```
+```ts
 this.myInterval = setInterval(() => {
   // something
 }, 2000);

best-practices/view-bindings.md

@@ -8,15 +8,18 @@ You want fast view rendering and responsible view bindings are the first step to
 
 ### Bad:
 
-```
+```xml
 // view markup
 <Label text="{{getMyText}} />
+```
 
+<!--  -->
+
+```ts
 // view binding class
 export class ViewBinding extends Observable {
-
   getMyText() {
-    return 'label text';
+    return 'label text'
   }
 }
 ```
@@ -25,14 +28,17 @@ This leads to developers doing logic in methods and can cause unnecessary view b
 
 ### Good:
 
-```
+```xml
 // view markup
 <Label text="{{myText}} />
+```
 
+<!--  -->
+
+```ts
 // view binding class
 export class ViewBinding extends Observable {
-
-  myText = 'label text';
+  myText = 'label text'
 }
 ```