Markdown 代码块生成器

创建格式正确的 Markdown 代码块，带有语法高亮功能。为文档、GitHub 和技术内容生成围栏式、缩进式和内联代码。

Create Markdown Code Blocks

Code Block Settings

Block Type

Programming Language

Filename (Optional)

Code Content

Output

Markdown Code Block Syntax Guide

Markdown provides several ways to display code in your documents. Each code block type has its own specific use case and formatting. Understanding these options will help you present code more effectively in your Markdown documents and GitHub repositories.

Fenced Code Blocks in Markdown

Fenced code blocks are the most popular method for adding code in Markdown. They are created using triple backticks (```) at the start and end of your code.

markdown

```javascript
function greet() {
  console.log("Hello, world!");
}
```

Adding a language identifier after the opening backticks enables syntax highlighting for that language. This improves readability and makes your code more visually appealing.

Language Support in Markdown Code Blocks

Markdown processors support a wide range of programming languages for syntax highlighting. Here are some of the most commonly used language identifiers:

javascript or js: For JavaScript code
python or py: For Python code
java: For Java code
c: For C code
cpp or c++: For C++ code
csharp or cs: For C# code
ruby or rb: For Ruby code
html: For HTML markup
css: For CSS
bash or sh: For shell scripts
diff: For displaying differences

Indented Code Blocks in Markdown

Indented code blocks are created by indenting each line of code with at least four spaces or one tab character.

markdown

    function greet() {
      console.log("Hello, world!");
    }

This approach is supported in standard Markdown but doesn't typically support syntax highlighting. It's most useful for basic code examples or in environments with limited Markdown extensions.

Inline Code in Markdown

For short code snippets within a paragraph, you can use inline code formatting with single backticks.

markdown

Use the `console.log()` function to display messages in JavaScript.

Inline code is perfect for referencing variable names, function names, or short commands within your regular text.

GitHub Flavored Markdown Code Blocks

GitHub Flavored Markdown (GFM) adds some useful extensions to code blocks:

Syntax highlighting for dozens of programming languages
Filename indicators with title attribute
Line highlighting for emphasizing specific code

markdown

```javascript title="app.js"
// This line will be highlighted {1}
function init() {
  return true;
}
```

Creating Diff Blocks in Markdown

To show code changes (like git diffs) in Markdown, use the "diff" language identifier with fenced code block:

markdown

```diff
- This line was removed
+ This line was added
  This line is unchanged
```

Many Markdown renderers (including GitHub) will color these lines appropriately, typically showing removed lines in red and added lines in green.

需要了解更多Markdown语法细节？我们的全面速查表涵盖了所有元素的详细说明：

探索完整 Markdown 语法

Frequently Asked Questions About Markdown Code Blocks

How do I create a code block in Markdown?

To create a code block in Markdown, you have two main options:

1.Fenced code blocks: Use triple backticks before and after your code, like:

markdown

```javascript console.log("Hello"); ```

2.Indented code blocks: Indent each line with 4 spaces or 1 tab:····console.log("Hello");

Fenced code blocks are generally preferred as they support syntax highlighting and are easier to read.

How do I specify a language in markdown code blocks?

To specify a language for syntax highlighting in a Markdown code block, add the language identifier right after the opening triple backticks with no spaces:

markdown

```python print("Hello, world!") ```

Common language identifiers include: javascript, python, java, c, cpp, csharp, ruby, php, css, html, bash, sql, and many more. This works on GitHub, GitLab, and most modern Markdown renderers. Indented code blocks don't support language specification.

What languages are supported in markdown code blocks?

Markdown code blocks support syntax highlighting for dozens of programming languages. The exact list varies by platform, but most common languages are supported across all major Markdown processors. Here's a list of frequently used language identifiers:

Web: javascript, typescript, html, css, scss, jsx, json, xml
Programming: python, java, c, cpp, csharp, go, rust, swift, kotlin, dart
Scripting: bash, powershell, ruby, perl, php, lua
Data: sql, yaml, toml, markdown, csv, graphql
Others: diff (for showing changes), docker, nginx, plaintext

On GitHub, over 200 languages are supported with their Linguist library. Many platforms also accept aliases like 'js' for JavaScript or 'py' for Python.

How do I display code in GitHub markdown?

To display code in GitHub markdown, use fenced code blocks with triple backticks. For syntax highlighting, add the language identifier after the opening backticks:

markdown

```javascript // Your JavaScript code here ```

GitHub supports advanced features like:
1. Adding a filename:```javascript title="app.js"
2. Line highlighting: Add{1-3} after a line to highlight it
3. Collapsed sections with<details> and<summary> tags
GitHub's markdown also displays diffs correctly when you use```diff as the language.

How do I escape backticks within a code block?

To display backticks within a code block, you can either:

1. Use more backticks for the fence than you need to show inside. For example, to show triple backticks, use four backticks to open and close your fence:

```````javascript````

2. Use an indented code block (4 spaces) if you need to show a fenced code block.

3. For inline code containing backticks, use more backticks in the delimiters:

`` `code with backtick` ``

How do I show a diff in Markdown?

To show code differences (like git diffs) in Markdown, use the "diff" language identifier with fenced code blocks. Then prefix added lines with "+" and removed lines with "-":

markdown

```diff
- This line was removed
+ This line was added
  This line is unchanged
```

This works especially well on GitHub, GitLab, and other platforms that support GitHub Flavored Markdown. The removed lines will typically display in red, and added lines in green.

How do I add a filename to a markdown code block?

Adding a filename to a Markdown code block depends on the platform. In GitHub Flavored Markdown, you can use the title attribute after the language identifier:

markdown

```javascript title="app.js" // Your code here ```

Some other platforms and processors use different syntaxes:
-GitHub, GitLab: Use the title attribute as shown above
-Some documentation generators (like VuePress):```js:app.js
-Jekyll and others:```javascript fileName="app.js"
The GitHub/GitLab approach is most widely supported.

Can you do line numbers in markdown code blocks?

Standard Markdown doesn't support line numbers natively. However, many Markdown processors and platforms provide extensions for this through custom syntax or configurations:

Platform-specific methods:

- GitHub: Doesn't directly support line numbers in code blocks, but you can reference specific lines in discussions.

- Documentation tools: Jekyll, Hugo, MkDocs, and others often have plugins or settings for enabling line numbers.

- Prism.js/highlight.js: These syntax highlighting libraries used by many sites have line number plugins.

If you need line numbers for visual reference only, consider adding them manually in your code or using a specialized editor to prepare your snippets.