Chore: support cue language syntax highlighting (#916)

* Docs: add cue syntax highlighting

Signed-off-by: Charlie Chiang <charlie_c_0129@outlook.com>

* add more cue code blog tags

Signed-off-by: Charlie Chiang <charlie_c_0129@outlook.com>

Signed-off-by: Charlie Chiang <charlie_c_0129@outlook.com>

docs/platform-engineers/components/custom-component.md

@@ -35,8 +35,8 @@ vela def init stateless -t component --template-yaml ./stateless.yaml -o statele
 
 It generates a file:
 
-```shell
-$ cat stateless.cue
+```cue
+// $ cat stateless.cue
 stateless: {
 	annotations: {}
 	attributes: workload: definition: {
@@ -76,7 +76,7 @@ In detail:
 
 Add parameters in this auto-generated custom component file :
 
-```
+```cue
 stateless: {
 	annotations: {}
 	attributes: workload: definition: {
@@ -126,8 +126,8 @@ vela def init task -t component -o task.cue
 
 It generates a file:
 
-```shell
-$ cat task.cue
+```cue
+// $ cat task.cue
 task: {
 	annotations: {}
 	attributes: workload: definition: {
@@ -147,7 +147,7 @@ template: {
 
 Edit the generated component file:
 
-```
+```cue
 task: {
 	annotations: {}
 	attributes: workload: definition: {
@@ -324,7 +324,7 @@ outputs: <unique-name>:
 
 Below is the example for `webserver` definition: 
 
-```
+```cue
 webserver: {
 	annotations: {}
 	attributes: workload: definition: {

docs/platform-engineers/cue/basic.md

@@ -28,7 +28,7 @@ Please make sure below CLIs are present in your environment:
 
 Below is the basic CUE data, you can define both schema and value in the same file with the almost same format:
 
-```
+```cue
 a: 1.5
 a: float
 b: 1
@@ -68,7 +68,7 @@ CUE has powerful CLI commands. Let's keep the data in a file named `first.cue` a
     ```shell
     cue eval first.cue
     ```
-    ```console
+    ```cue
     a: 1.5
     b: 1
     d: [1, 2, 3]
@@ -102,7 +102,7 @@ CUE has powerful CLI commands. Let's keep the data in a file named `first.cue` a
     ```shell
     cue export first.cue
     ```
-    ```console
+    ```json
     {
         "a": 1.5,
         "b": 1,
@@ -122,7 +122,7 @@ CUE has powerful CLI commands. Let's keep the data in a file named `first.cue` a
     ```shell
     cue export first.cue --out yaml
     ```
-    ```console
+    ```yaml
     a: 1.5
     b: 1
     d:
@@ -138,7 +138,7 @@ CUE has powerful CLI commands. Let's keep the data in a file named `first.cue` a
     ```shell
     cue export -e g first.cue
     ```
-    ```console
+    ```cue
     {
         "h": "abc"
     }
@@ -150,7 +150,7 @@ For now, you have learned all useful CUE cli operations.
 
 * Data structure: Below is the basic data structure of CUE.
 
-```shell
+```cue
 // float
 a: 1.5
 
@@ -191,13 +191,13 @@ Let's name it `second.cue`. Then the `cue export` won't complain as the `#abc` i
 ```shell
 cue export second.cue
 ```
-```console
+```json
 {}
 ```
 
 You can also define a more complex custom struct, such as:
 
-```
+```cue
 #abc: {
   x: int
   y: string
@@ -216,7 +216,7 @@ Let's try to define a CUE template with the knowledge just learned.
 
 1. Define a struct variable `parameter`.
 
-```shell
+```cue
 parameter: {
 	name: string
 	image: string
@@ -227,7 +227,7 @@ Let's save it in a file called `deployment.cue`.
 
 2. Define a more complex struct variable `template` and reference the variable `parameter`.
 
-```
+```cue
 template: {
 	apiVersion: "apps/v1"
 	kind:       "Deployment"
@@ -255,7 +255,7 @@ Add it into the `deployment.cue`.
 
 3. Then, let's add the value by adding following code block:
 
-```
+```cue
 parameter:{
    name: "mytest"
    image: "nginx:v1"
@@ -267,7 +267,7 @@ parameter:{
 ```shell
 cue export deployment.cue -e template --out yaml
 ```
-```console
+```yaml
 apiVersion: apps/v1
 kind: Deployment
 spec:
@@ -291,7 +291,7 @@ spec:
    -  A list like `[...string]` means it can hold multiple string elements.
       If we don't add `...`, then `[string]` means the list can only have one `string` element in it.
    -  A struct like below means the struct can contain unknown fields. 
-      ```
+      ```cue
       {
         abc: string   
         ...
@@ -299,19 +299,19 @@ spec:
       ```
 
 * Operator  `|`, it represents a value could be both case. Below is an example that the variable `a` could be in string or int type.
-  ```shell
+  ```cue
   a: string | int
   ```
 
 * Default Value, we can use `*` symbol to represent a default value for variable. That's usually used with `|`,
   which represents a default value for some type. Below is an example that variable `a` is `int` and it's default value is `1`.
-  ```shell
+  ```cue
   a: *1 | int
   ```
 
 * Optional Variable. In some cases, a variable could not be used, they're optional variables, we can use `?:` to define it.
   In the below example, `a` is an optional variable, `x` and `z` in `#my` is optional while `y` is a required variable.
-  ```
+  ```cue
   a ?: int
 
   #my: {
@@ -323,7 +323,7 @@ spec:
 
 Optional variables can be skipped, that usually works together with conditional logic.
 Specifically, if some field does not exist, the CUE grammar is `if _variable_ != _|_`, the example is like below:
-  ```
+  ```cue
   #Config: {
     name:  string
     value: string
@@ -351,7 +351,7 @@ Specifically, if some field does not exist, the CUE grammar is `if _variable_ !=
 
 * Operator  `&`, it used to calculate two variables.
 
-```shell
+```cue
 a: *1 | int
 b: 3
 c: a & b
@@ -364,7 +364,7 @@ You can evaluate the result by using `cue eval`:
 ```shell
 cue eval third.cue
 ```
-```console
+```cue
 a: 1
 b: 3
 c: 3
@@ -373,7 +373,7 @@ c: 3
 * Conditional statement, it's really useful when you have some cascade operations that different value affects different results.
   So you can do `if..else` logic in the template.
 
-```shell
+```cue
 price: number
 feel: *"good" | string
 // Feel bad if price is too high
@@ -390,14 +390,14 @@ You can evaluate the result by using `cue eval`:
 ```shell
 cue eval fourth.cue
 ```
-```console
+```cue
 price: 200
 feel:  "bad"
 ```
 
 Another example is to use bool type as parameter.
 
-```
+```cue
 parameter: {
     name:   string
     image:  string
@@ -443,7 +443,7 @@ output: {
     }
     ```
   - Loop for type
-    ```
+    ```cue
     #a: {
         "hello": "Barcelona"
         "nihao": "Shanghai"
@@ -481,7 +481,7 @@ output: {
     }
     ```
   - If clause in Loop {}
-  ```
+  ```cue
   parameter: [
 	{
 		name: "empty"
@@ -497,14 +497,14 @@ output: {
   }]
   ```
   the result is:
-  ```
+  ```console
   cue eval ../blog/a.cue -e dataFrom
   [{}, {
     name: "xx1"
   }]
   ```
   - If clause in Loop with condition
-  ```
+  ```cue
   parameter: [
 	{
 		name: "empty"
@@ -518,7 +518,7 @@ output: {
   }]
   ```
   the result is:
-  ```
+  ```console
   cue eval ../blog/a.cue -e dataFrom
   [{
     name: "xx1"

docs/platform-engineers/cue/definition-edit.md

@@ -10,7 +10,7 @@ In KubeVela CLI, `vela def` command group provides a series of convenient defini
 
 `vela def init` is a command that helps users bootstrap new definitions. To create an empty trait definition, run `vela def init my-trait -t trait --desc "My trait description."`
 
-```json
+```cue
 "my-trait": {
         annotations: {}
         attributes: {
@@ -83,7 +83,7 @@ spec:
 
 Running `vela def init my-comp -t component --desc "My component." --template-yaml ./my-deployment.yaml` to get the CUE-format ComponentDefinition
 
-```json
+```cue
 "my-comp": {
         annotations: {}
         attributes: workload: definition: {

docs/platform-engineers/cue/patch-strategy.md

@@ -18,7 +18,7 @@ If you want to add multiple environment variables for a specific container, you
 
 Apply the following definition to your cluster:
 
-```yaml
+```cue
 myenv: {
 	type: "trait"
 	annotations: {}
@@ -75,7 +75,7 @@ spec:
 
 Before using the `myenv` patch trait, the `env` in the application is like:
 
-```
+```yaml
 spec:
   containers:
   - env:
@@ -85,7 +85,7 @@ spec:
 
 After using the `myenv` patch trait, the `env` in the application is like:
 
-```
+```yaml
 spec:
   containers:
   - env:
@@ -105,7 +105,7 @@ The strategy of this annotation is similar to the Kubernetes official [retainKey
 
 > In the following example, `+patchKey=name` specifies which container the patch should be applied to, while `+patchStrategy=retainKeys` specifies that when merge environment variables, if a duplicate environment variable name is specified, the environment variable value will be overwritten.
 
-```yaml
+```cue
 myenv: {
 	type: "trait"
 	annotations: {}
@@ -198,7 +198,7 @@ If you wish to replace the entire env array directly, you can use the `+patchStr
 
 > In the following example, `+patchKey=name` specifies which container the patch should be applied to, while `+patchStrategy=replace` specifies that when merge the arrays, the entire array of environment variables will be replaced directly.
 
-```yaml
+```cue
 myenv: {
 	type: "trait"
 	annotations: {}
@@ -258,7 +258,7 @@ spec:
 
 Before using the `myenv` patch trait, the `env` in the application is like:
 
-```
+```yaml
 spec:
   containers:
   - env:
@@ -270,7 +270,7 @@ spec:
 
 After using the `myenv` patch trait, the `env` in the application is like:
 
-```
+```yaml
 spec:
   containers:
   - env:

docs/platform-engineers/policy/custom-policy.md

@@ -16,8 +16,8 @@ vela def init my-plc -t policy --desc "My ingress route policy." > myroute.cue
 
 The content of the scaffold expected to be:
 
-```
-$ cat myroute.cue
+```cue
+// $ cat myroute.cue
 "my-plc": {
 	annotations: {}
 	attributes: {}

docs/platform-engineers/system-operation/velaql.md

@@ -18,7 +18,7 @@ KubeVela command has supported a `vela ql` command to query resources.
 
 You can specify a query file in cue like below:
 
-```ql.cue
+```cue
 import (
 	"vela/ql"
 )
@@ -102,7 +102,7 @@ vela kube apply -f query-configmap.yaml
 
 Create a file named `my-view.cue` with:
 
-```yaml
+```cue
 import (
   "vela/ql"
 )
@@ -193,7 +193,7 @@ The current view in VelaQL relies on configMap in k8s as a storage medium, You c
 Every time you use VelaQL, the system will look for the configMap with the same name as the view under the vela-system namespace, and extract the template for query operations, so please ensure that your custom view is stored under vela-system.
 ​
 The structure of a template is as follows:
-```
+```cue
 import (
   "vela/ql"
 )
@@ -229,7 +229,7 @@ List all resources created by Application
 - list: after the operation is successful, this field will be filled. `list` is a list of all resources, the k8s description of the resource is stored in the object field.
 - err: if an error occurs in the operation, the error message will be displayed as a string.
 
-```
+```cue
 #ListResourcesInApp: {
 	app: {
 		name:      string
@@ -252,7 +252,7 @@ List all resources created by Application
 
 #### Usage
 
-```
+```cue
 import (
   "vela/ql"
 )
@@ -299,7 +299,7 @@ List all pods created by the workload
 - list: after the operation is successful, this field will be filled. `list` is a list of all pod resources
 - err: if an error occurs in the operation, the error message will be displayed as a string.
 
-```
+```cue
 #CollectPods: {
 	value: {...}
 	cluster: string
@@ -309,7 +309,7 @@ List all pods created by the workload
 ```
 
 #### Usage
-```
+```cue
 import (
   "vela/ql"
 )
@@ -338,7 +338,7 @@ Get resource in Kubernetes cluster.
 - value: the resource metadata to be get. And after successful execution, value will be updated with resource definition in cluster.
 - err:  if an error occurs, the err will contain the error message.
 
-```
+```cue
 #Read: {
   value: {}
   err?: string
@@ -347,7 +347,7 @@ Get resource in Kubernetes cluster.
 
 ### Usage
 
-```
+```cue
 // You can use configmap.value.data after this action.
 configmap: ql.#Read & {
    value: {
@@ -371,7 +371,7 @@ List resources in the k8s cluster.
 - filter: namespace is used to select a namespace, and the matchingLabels field is used to filter labels
 - err: if an error occurs, the err will contain the error message.
 
-```
+```cue
 #List: {
 	cluster:   *"" | string
 	resource: {

docs/platform-engineers/traits/customize-trait.md

@@ -18,8 +18,8 @@ vela def init my-route -t trait --desc "My ingress route trait." > myroute.cue
 
 The content of the scaffold expected to be:
 
-```
-$ cat myroute.cue
+```cue
+// $ cat myroute.cue
 "my-route": {
 	annotations: {}
 	attributes: {

docs/platform-engineers/workflow/workflow.md

@@ -41,8 +41,8 @@ vela def init my-helm -t workflow-step --desc "Apply helm charts and wait till i
 ```
 
 The result is as follows：
-```shell
-$ cat my-helm.cue
+```cue
+// $ cat my-helm.cue
 
 "my-helm": {
 	annotations: {}
@@ -58,7 +58,7 @@ template: {
 
 Import `vela/op` and complete the Cue code in `template`:
 
-```
+```cue
 import (
   "vela/op"
 )

docusaurus.config.js

@@ -151,6 +151,7 @@ module.exports = {
     },
     prism: {
       theme: require('prism-react-renderer/themes/dracula'),
+      additionalLanguages: ['cue'],
     },
     zoom: {
       selector: '.markdown :not(em) > img',