0 Votes

Wiki source code of coding_explanation

Last modified by Ryan C on 2025/03/14 15:51

Show last authors
1 The coloration in code blocks (syntax highlighting) is used to make the code easier to read and debug. When you specify a language after the opening triple backticks (\`\`\`), Markdown engines and code renderers apply **syntax highlighting**. Each color represents a specific element of the language's syntax.
2
3 ---
4
5 ## **Examples of Syntax Highlighting**
6
7 #### **1. Variables and Keywords**
8 - **Variables**: Often displayed in one color (e.g., blue or cyan) to distinguish them from keywords.
9 - **Keywords**: Reserved words in a programming language (like `if`, `else`, `function`) are highlighted to make them stand out.
10
11 Example:
12 ```python
13 def my_function(variable):
14 if variable == 10:
15 return "Success"
16 ```
17 - `def`, `if`, and `return` are **keywords** (highlighted in one color).
18 - `my_function` and `variable` are **variables** (highlighted in another color).
19 - Strings (`"Success"`) have their own color.
20
21 ---
22
23 ## **2. Strings**
24 Strings (text wrapped in quotes) are highlighted to differentiate them from code.
25 Example:
26 ```javascript
27 console.log("Hello, world!");
28 ```
29 - `"Hello, world!"` will typically appear in a distinct color (e.g., green or orange).
30
31 ---
32
33 ## **3. Functions**
34 Functions and methods are highlighted to show they are executable pieces of code.
35 Example:
36 ```powershell
37 Write-Output "This is PowerShell"
38 ```
39 - `Write-Output` (a command/function) is highlighted in one color, while the string `"This is PowerShell"` is highlighted in another.
40
41 ---
42
43 ## **4. Comments**
44 Comments (non-executable text for documentation) are often shown in gray or italicized to indicate they are ignored by the program.
45 Example:
46 ```python
47 # This is a comment in Python
48 print("Hello, world!") # This comment explains the code
49 ```
50
51 ---
52
53 ## **5. Syntax Errors**
54 If your code block contains invalid syntax or unrecognized elements for the specified language, the text might not be colored properly, or parts of it may appear in a neutral color.
55
56 ---
57
58 ### **What If No Language Is Specified?**
59 If you don't specify a language after the opening triple backticks, the renderer won’t apply syntax highlighting, and the code will appear in plain text. Example:
60 ```markdown
61 ```
62 This is plain text in a code block.
63 ```
64 ```
65
66 ---
67
68 ### Supported Languages for Syntax Highlighting
69 Here are some common languages and their identifiers:
70 - **`python`**: Python scripts.
71 - **`javascript`**: JavaScript code.
72 - **`powershell`**: PowerShell scripts.
73 - **`bash`**: Shell or terminal commands.
74 - **`html`**: HTML code.
75 - **`css`**: CSS stylesheets.
76
77 ---
78
79 ### How to Use It in Markdown
80
81 Specify the language like this:
82
83 ```markdown
84 ```language
85 # Code goes here
86 ```
87
88
89 For example:
90 ```
91 ```python
92 def greet():
93 print("Hello, world!")
94 ```
95
96 renders
97
98 ```python
99 def greet():
100 print("Hello, world!")
101 ```
102
103 ```powershell
104
105 ---
106
107 ### Expected Behavior
108
109 1. **Formatted Code**:
110 The block should display syntax highlighting for the specified language (e.g., Python, JavaScript, etc.).
111 2. **Correct Rendering**:
112 The Markdown renderer in Wiki.js should automatically parse this properly if the triple backticks are used correctly.
113 ```
114
115 ---
116 ```yaml
117 ---
118 title: "My Page"
119 date: "2025-01-17"
120 layout: "post"
121 ---
122 ```
123
124 ### Common Issues in Wiki.js Markdown:
125
126 1. **Indentation**:
127 - Ensure there are no extra spaces or tabs before the triple backticks.
128
129 2. **Improper Nesting**:
130 - If using nested code blocks (like showing how to format Markdown itself), you must escape or double the backticks.
131
132 Example:
133 ```markdown
134 ````markdown
135 ```python
136 def greet():
137 print("Hello, world!")```
138
139
140
141
142
143
144