Hunterlan38

# Header Anchors

1. Readme File How To Format
2. Readme.md Syntax Code
3. Readme.md Syntax Table
4. Md File Formatting
5. Readme Md Syntax Cheat
6. Git Readme Formatting

For a quick and painless solution check out the last update at the end of the post. When you create a project on GitHub, it is highly encouraged to add a README file too. Thus, when someone visits. Markdown-syntax README.md; Find file Blame History Permalink. Initial commit 8ad39f4d simov authored Jul 06, 2018. 8ad39f4d README.md 386 Bytes Edit Web IDE. Replace README.md.

Headers automatically get anchor links applied. Rendering of anchors can be configured using the markdown.anchor option.

# Links

# Internal Links

Internal links are converted to <router-link> for SPA navigation. Also, every README.md or index.md contained in each sub-directory will automatically be converted to index.html, with corresponding URL /.

For example, given the following directory structure:

And providing you are in foo/one.md:

# Redirection for URLs

VuePress supports redirecting to clean links. If a link /foo is not found, VuePress will look for a existing /foo/ or /foo.html. Conversely, when one of /foo/ or /foo.html is not found, VuePress will try the other. With this feature, we can customize your website’s URLs with the official plugin vuepress-plugin-clean-urls(opens new window).

TIP

Regardless of whether the permalink and clean-urls plugins are used, your relative path should be defined by the current file structure. In the above example, even though you set the path of /foo/one.md to /foo/one/, you should still access /foo/two.md via ./two.md.

# Page Suffix

Pages and internal links get generated with the .html suffix by default.

You can customize this by setting config.markdown.pageSuffix.

# External Links

Outbound links automatically get target='_blank':

You can customize the attributes added to external links by setting config.markdown.externalLinks.

# Frontmatter

YAML frontmatter(opens new window) is supported out of the box:

This data will be available to the rest of the page, along with all custom and theming components.

For more details, see Frontmatter.

# GitHub-Style Tables

Input

Output

# Emoji 🎉

Input

Output

🎉 💯

A list of all emojis(opens new window) is available.

# Table of Contents

Input

Output

• Links
• Custom Containers default theme

Rendering of the TOC can be configured using the markdown.toc option.

# Custom Containers default theme

Custom containers can be defined by their types, titles, and contents.

# Default Title

Input

Output

TIP

This is a tip

WARNING

This is a dangerous warning

This is a details block, which does not work in Internet Explorer or Edge.

# Custom Title

Input

Output

Readme File How To Format

STOP

Danger zone, do not proceed

Also see:

# Syntax Highlighting in Code Blocks

VuePress uses Prism(opens new window) to highlight language syntax in Markdown code blocks, using coloured text. Prism supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block:

Input

Output

Input

Output

A list of valid languages(opens new window) is available on Prism’s site.

# Line Highlighting in Code Blocks

Input

Output

In addition to a single line, you can also specify multiple single lines, ranges, or both:

• Line ranges: for example {5-8}, {3-10}, {10-17}
• Multiple single lines: for example {4,7,9}
• Line ranges and single lines: for example {4,7-13,16,23-27,40}

Readme.md Syntax Code

Input

Output

# Line Numbers

You can enable line numbers for each code blocks via config:

• Demo:

Readme.md Syntax Table

# Import Code Snippets beta

You can import code snippets from existing files via following syntax:

It also supports line highlighting:

Input

Output

TIP

Since the import of the code snippets will be executed before webpack compilation, you can’t use the path alias in webpack. The default value of @ is process.cwd().

You can also use a VS Code region(opens new window) to only include the corresponding part of the code file. You can provide a custom region name after a # following the filepath (snippet by default):

Md File Formatting

Input

Code file

Readme Md Syntax Cheat

Output

Git Readme Formatting

# Advanced Configuration

VuePress uses markdown-it(opens new window) as the Markdown renderer. A lot of the extensions above are implemented via custom plugins. You can further customize the markdown-it instance using the markdown option in .vuepress/config.js: