Skip to Content
0 Votes

coding_explanation

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

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.

Examples of Syntax Highlighting

1. Variables and Keywords

  • Variables: Often displayed in one color (e.g., blue or cyan) to distinguish them from keywords.
  • Keywords: Reserved words in a programming language (like if, else, function) are highlighted to make them stand out.

Example:

def my_function(variable):
   if variable == 10:
       return "Success"
  • def, if, and return are keywords (highlighted in one color).
  • my_function and variable are variables (highlighted in another color).
  • Strings ("Success") have their own color.

2. Strings

Strings (text wrapped in quotes) are highlighted to differentiate them from code. Example:

console.log("Hello, world!");
  • "Hello, world!" will typically appear in a distinct color (e.g., green or orange).

3. Functions

Functions and methods are highlighted to show they are executable pieces of code. Example:

Write-Output "This is PowerShell"
  • Write-Output (a command/function) is highlighted in one color, while the string "This is PowerShell" is highlighted in another.

4. Comments

Comments (non-executable text for documentation) are often shown in gray or italicized to indicate they are ignored by the program. Example:

# This is a comment in Python
print("Hello, world!")  # This comment explains the code

5. Syntax Errors

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.

What If No Language Is Specified?

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:

This is plain text in a code block.

Supported Languages for Syntax Highlighting

Here are some common languages and their identifiers:

  • python: Python scripts.
  • javascript: JavaScript code.
  • powershell: PowerShell scripts.
  • bash: Shell or terminal commands.
  • html: HTML code.
  • css: CSS stylesheets.

How to Use It in Markdown

Specify the language like this:

```language
# Code goes here

For example:

```python
def greet():
    print("Hello, world!")

renders

def greet():
   print("Hello, world!")
---

### Expected Behavior

1. **Formatted Code**:
   The block should display syntax highlighting for the specified language (e.g., Python, JavaScript, etc.).
2. **Correct Rendering**:
   The Markdown renderer in Wiki.js should automatically parse this properly if the triple backticks are used correctly.
---
title: "My Page"
date: "2025-01-17"
layout: "post"
---

Common Issues in Wiki.js Markdown:

  1. Indentation:
    • Ensure there are no extra spaces or tabs before the triple backticks.
  2. Improper Nesting:
    • If using nested code blocks (like showing how to format Markdown itself), you must escape or double the backticks.
    Example:
    ````markdown
    ```python
    def greet():
        print("Hello, world!")```