Wiki source code of coding_explanation
Show last authors
author | version | line-number | content |
---|---|---|---|
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 |