Код Markdown

Markdown предоставляет несколько способов отображения кода: от простого встроенного кода до сложных блоков кода, чтобы удовлетворить потребности отображения кода в различных сценариях.

Встроенный код

Если это функция или фрагмент кода в абзаце, вы можете обернуть его обратными кавычками (`), например:

`printf()` 函数

Отображаемый результат выглядит следующим образом:

Распространённые примеры использования:

  • Имя функции: используйтеconsole.log()вывод информации
  • Имя переменной: присвойте значениеuserNamevariable
  • Командная строка: запуститеnpm installустановите зависимости
  • Клавиша клавиатуры: нажатьCtrl+Cкопировать содержимое
  • Имя файла: редактироватьindex.htmlфайл

Экранирование специальных символов

Когда вам нужно отобразить обратные кавычки или другие специальные символы во встроенном коде, необходимо выполнить экранирование.

Способы отображения обратных кавычек:

Используйте двойные обратные кавычки, чтобы окружить одну обратную кавычку:

``Use `backticks` to surround code``

Отображённый результат:

Используйте несколько обратных кавычек, чтобы окружить:

```Code containing `` double backticks```

Отображённый результат:

Обработка других специальных символов:

  • HTML-теги:<div>элемент
  • Математический символ: вычислитьx + y = z
  • Специальный символ: используйте&nbsp;для обозначения пробела

Блоки кода

Блоки кода с отступом

В блоках кода используются4 пробелаилисимвол табуляции (клавиша Tab)。

Формат синтаксиса:

Normal text paragraph

    This is an indented code block
    Each line is preceded by four spaces
    Keep the original format of the code

Continue normal text

Пример:

Отображаемый результат выглядит следующим образом:

Блоки кода с тройными обратными кавычками

Вы также можете использовать```, чтобы обернуть фрагмент кода, и указать язык (или нет):

```
Multi-line code content
Can contain blank lines
Keep original indentation
```

Тройные обратные кавычки (```) — наиболее часто используемый синтаксис блоков кода, поддерживающий подсветку синтаксиса и отображение многострочного кода.

```javascript
$(document).ready(function () {
    alert('EXAMPLE');
});
```

Отображаемый результат выглядит следующим образом:

Примечания:

  • Блоки кода с отступом требуют пустых строк до и после для разделения
  • Все строки кода должны сохранять одинаковый отступ
  • Подсветка синтаксиса не поддерживается
  • При использовании в списке требуется отступ в 8 пробелов

Идентификаторы языков и подсветка синтаксиса

Добавление идентификатора языка после тройных обратных кавычек может включить подсветку синтаксиса.

Список распространённых идентификаторов языков:

  • javascript / js - JavaScript
  • python / py - Python
  • html - HTML
  • css - CSS
  • sql - SQL
  • json - JSON
  • xml - XML
  • yaml / yml - YAML
  • bash / shell- Shell script
  • java - Java
  • cpp / c++ - C++
  • csharp / c# - C#
  • php - PHP
  • ruby / rb - Ruby
  • go- язык Go
  • 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):
    """计算圆的面积"""
    import math
    return math.pi * radius ** 2

# 使用函数
area = calculate_area(5)
print(f"圆的面积是: {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;
```

Расширенные возможности блоков кода

Отображение номеров строк

Некоторые рендереры Markdown поддерживают отображение номеров строк, реализуемое через специальный синтаксис или конфигурацию.

Пример синтаксиса (частично поддерживается):

```javascript {.line-numbers}
function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10));
```

Или используйте:

```javascript showLineNumbers
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
const sum = doubled.reduce((a, b) => a + b, 0);
console.log(`总和: ${sum}`);
```

Сравнение различий кода

Используется для отображения добавлений, удалений или изменений в коде, часто применяется для показа изменений в системе контроля версий.

Синтаксис diff:

```diff
function calculateTotal(items) {
-   let total = 0;
+   let total = 0.0;
    
    for (let item of items) {
-       total += item.price;
+       total += parseFloat(item.price);
    }
    
+   // 保留两位小数
+   total = Math.round(total * 100) / 100;
    return total;
}
```

Отображение diff в стиле Git:

```diff
@@ -1,5 +1,8 @@
 function greetUser(name) {
-    console.log("Hello " + name);
+    if (!name) {
+        throw new Error("Name is required");
+    }
+    console.log(`Hello, ${name}!`);
 }
```

Сравнение diff для конкретного языка:

```javascript
// 之前的代码
const oldFunction = () => {
    var x = 10;  // &#x274c; 使用 var
    console.log("Value: " + x);  // &#x274c; 字符串拼接
}

// 改进后的代码  
const newFunction = () => {
    const x = 10;  // &#x2705; 使用 const
    console.log(`Value: ${x}`);  // &#x2705; 模板字符串
}
```

Другие расширения