YouTip` element
* Mathematical symbols: Calculate `x + y = z`
* Special symbols: Use ` ` to represent a space
* * *
## Code Blocks
### Indented Code Blocks
Code blocks use **4 spaces** or a **tab (Tab key)**.
Syntax format:
Normal text paragraph This is an indented code block There are four spaces before each line Maintaining the original format of the code Continuing normal text
!(#)
An example is as follows:
!(#)
The display result is as follows:
!(#)
### Fenced Code Blocks
You can also wrap a piece of code with ``` and specify a language (or not specify one):
``` Multi-line code content Can contain blank lines Maintains original indentation ```
!(#)
Fenced code blocks (```) are the most commonly used code block syntax, supporting syntax highlighting and multi-line code display.
```javascript $(document).ready(function () { alert('TUTORIAL'); }); ```
The display result is as follows:
!(#)
**Notes:**
* Indented code blocks need to be separated by blank lines before and after
* All code lines must maintain consistent indentation
* Does not support syntax highlighting
* When used in a list, 8 spaces of indentation are required
### Language Identifiers and Syntax Highlighting
Adding a language identifier after the triple backticks enables syntax highlighting.
**Common Language Identifiers List:**
* `javascript` / `js` - JavaScript
* `python` / `py` - Python
* `html` - HTML
* `css` - CSS
* `sql` - SQL
* `json` - JSON
* `xml` - XML
* `yaml` / `yml` - YAML
* `bash` / `shell` - Shell scripts
* `java` - Java
* `cpp` / `c++` - C++
* `csharp` / `c#` - C#
* `php` - PHP
* `ruby` / `rb` - Ruby
* `go` - Go language
* `rust` - Rust
* `typescript` / `ts` - TypeScript
**JavaScript:**
```javascript const users = [ { name: "Alice", age: 25 }, { name: "Bob", age: 30 } ]; const adults = users.filter(user => user.age >= 18); console.log(adults); ```
**Python:**
```python def calculate_area(radius): """Calculate the area of a circle""" import math return math.pi * radius ** 2 # Use the function area = calculate_area(5) print(f"The area of the circle is: {area:.2f}") ```
**SQL:**
```sql SELECT u.name, u.email, COUNT(o.id) as order_count FROM users u LEFT JOIN orders o ON u.id = o.user_id WHERE u.created_at >= '2024-01-01' GROUP BY u.id, u.name, u.email ORDER BY order_count DESC LIMIT 10; ```
!(#)
* * *
## Advanced Features of Code Blocks
### Line Number Display
Some Markdown renderers support displaying line numbers, achieved through specific syntax or configuration.
**Syntax Example (partially supported):**
```javascript {.line-numbers} function fibonacci(n) { if (n x * 2); const sum = doubled.reduce((a, b) => a + b, 0); console.log(`Sum: ${sum}`); ```
### Code Diff Comparison
Used to display additions, deletions, or modifications in code, commonly used to show changes in version control.
**Diff Syntax:**
```diff function calculateTotal(items) { - let total = 0; + let total = 0.0; for (let item of items) { - total += item.price; + total += parseFloat(item.price); } + // Keep two decimal places + total = Math.round(total * 100) / 100; return total; } ```
!(#)
**Git-style Diff Display:**
```diff @@ -1,5 +1,8 @@ function greetUser(name) { - console.log("Hello " + name); + if (!name) { + throw new Error("Name is required"); + } + console.log(`Hello, ${name}!`); } ```
**Language-specific Diff Comparison:**
```javascript // Previous code const oldFunction = () => { var x = 10; // ❌ Using var console.log("Value: " + x); // ❌ String concatenation } // Improved code const newFunction = () => { const x = 10; // ✅ Using const console.log(`Value: ${x}`); // ✅ Template string } ```
!(#)
Md Code
Markdown provides multiple ways to display code, from simple inline code to complex code blocks, to meet the code display needs of different scenarios.
* * *
## Inline Code
If you have a function or code snippet within a paragraph, you can wrap it with backticks (`), for example:
`printf()` function
The display result is as follows:
!(#)
**Common Usage Examples:**
* Function name: Use `console.log()` to output information
* Variable name: Assign a value to the `userName` variable
* Command line: Run `npm install` to install dependencies
* Keyboard key: Press `Ctrl+C` to copy content
* File name: Edit the `index.html` file
!(#)
### Special Character Escaping
When you need to display backticks or other special characters within inline code, you need to escape them.
Method to display backticks:
**Using double backticks to enclose a single backtick:**
`` `backtick` ``
Rendering effect:
!(#)
**Using multiple backticks to enclose:**
```code with `` double backticks```
Rendering effect:
!(#)
**Other special character handling:**
* HTML tags: `