SegmentFault

Segmentfault (www.sf.gg) is China's leading developer community.
We hope to provide a pure and high-quality technology exchange platform for Chinese developers,
Learn, communicate and grow with developers to create an era of developers!

Markdown editor syntax Guide

Basic skills

code

If you only want to highlight a function name or keyword in a statement, you can use @`@function_ name()@`@ realization

Usually the editor adapts the appropriate highlighting method according to the code fragment, but you can also use the @```@ Wrap a piece of code and specify a language

 @```javascript@
$(document).ready(function () {
    alert('hello world');
});
@```@

Supported languages: 1c, abnf, accesslog, actionscript, ada, apache, applescript, arduino, armasm, asciidoc, aspectj, autohotkey, autoit, avrasm, awk, axapta, bash, basic, bnf, brainfuck, cal, capnproto, ceylon, clean, clojure, clojure-repl, cmake, coffeescript, coq, cos, cpp, crmsh, crystal, cs, csp, css, d, dart, delphi, diff, django, dns, dockerfile, dos, dsconfig, dts, dust, ebnf, elixir, elm, erb, erlang, erlang-repl, excel, fix, flix, fortran, fsharp, gams, gauss, gcode, gherkin, glsl, go, golo, gradle, groovy, haml, handlebars, haskell, haxe, hsp, htmlbars, http, hy, inform7, ini, irpf90, java, javascript, json, julia, kotlin, lasso, ldif, leaf, less, lisp, livecodeserver, livescript, llvm, lsl, lua, makefile, markdown, mathematica, matlab, maxima, mel, mercury, mipsasm, mizar, mojolicious, monkey, moonscript, n1ql, nginx, nimrod, nix, nsis, objectivec, ocaml, openscad, oxygene, parser3, perl, pf, php, pony, powershell, processing, profile, prolog, protobuf, puppet, purebasic, python, q, qml, r, rib, roboconf, rsl, ruby, ruleslanguage, rust, scala, scheme, scilab, scss, smali, smalltalk, sml, sqf, sql, stan, stata, step21, stylus, subunit, swift, taggerscript, tap, tcl, tex, thrift, tp, twig, typescript, vala, vbnet, vbscript, vbscript-html, verilog, vhdl, vim, x86asm, xl, xml, xquery, yaml, zephir

You can also use 4 spaces to indent and paste the code to achieve the same effect

 !!    !!def g(x):
!!    !!    yield from range(x, 0, -1)
!!    !!yield from range(x)

If you don't need code highlighting, you can disable it in the following ways:

 @```nohighlight@
@```@

title

When there are many contents in the article, we can use the title to segment

 Title 1 @ = = = = = = = @ 











ාාාාාාාාාාාා#ාාා##ාාා@###@

Bold italics

 @*@ Italicized text @*@    @_@ Italicized text @_ @
@**@ Bold text @**@    @__ @ Bold text @__ @
@***@ Text in bold italics @***@    @___ @ Text in bold italics @___ @

link

Common linking methods

 Text link @ [link name] (http: / / link URL) @ 
 URL link @ < http: / / link URL >@

Advanced linking skills

 This link uses 1 as the URL variable @ [Google] [1] @. 
 the link uses Yahoo as the URL variable @ [Yahoo!] @. 
 and then assigns a value to the variable at the end of the document (URL) 
!! @ @ [1] @ @! @ http: / / www.google. COM / 
 @ @ [Yahoo] @ @ @ http://www.yahoo.com/

list

Normal unordered list

 @-@!! Use [minus + space] 
 + @!! use [plus sign + space] 
 * @!! use [asterisk + space] before list text

General sequential table

 @1. @!! use [number + space] 
 @ 2. @!! we will automatically help you add the number 
 @ 7 @!! don't worry about the wrong number, we will automatically correct the 7 in this line to 3 when it is displayed

List nesting

 @1. @!! list all the elements: 
! @ @ @!! unordered list element a 
 @ @ @ 1. @!! ordered sublist of element a 
! @ @!! four spaces in front of 
 @ 2. @!! multiple line breaks in the list: 
!! four spaces must be added to the front, 
!! the whole format will not be disordered 
 @ 3. @!!! Reference in the list: 
!!! @ > @ a blank line before 
! @ @ >@ You still need to add four spaces before @ > @ @ @ 4. @!! in the list, the code snippet in the list: 
!! @ '' '@!! the first four spaces, and then write 
!! @! @! @!!! Or empty eight directly to introduce the code block

quote

Common reference

 @>@Before quoting the text, use [greater than sign + space] 
 > @ break line can not be added, new line should be added

Nested references in references

 @>@!! Outermost reference 
 > @ @ @ @! @ @ @ @!! one more @ > @!! nested one level reference 
 @ @ @ @ @ @ @ @ @! @ @ @! @ you can nest many levels

Nested list in reference

 @>@This is a list nested in a reference 
 > @ @ @!! @ @ @ @!! there can also be a sublist 
 > @ @!! @ * @!! the sublist needs to start with four spaces after @ - @

Nested code blocks in references

 @>@Also, add four spaces in front to form a code block 
 > @ @ @ @ @ @!!!!!!! Or use @ '' '@ to form a code block 
 > @@```@

picture

The difference with the link method is that an exclamation point is added to the front ! Is it easier to remember?

 @! [picture name] (http: / / image website)@

Of course, you can also use variables for image URLs like URLs

 This link uses 1 as the URL variable [Google] [1]. 
 and then assigns a value to the variable at the end of the document (URL) 
!! [1]:!! http://www.google.com/logo.png

Line break

If you start a new line, just add 2 spaces at the end of the current line

 Add 2 spaces at the end of the current line

If you want to start a new paragraph, just leave one line blank.

Separator

If you have the habit of writing a line, you can enter three minus signs on a new line - When there are paragraphs after the current paragraph, please leave a line:

 Preceding paragraph 
 @ --- @ 
 following paragraph

Advanced skills

In line HTML elements

Currently, only partial HTML element effects are supported, including <kdb> <b> <i> <em> <sup> <sub> <br> For example

Key position display

 Use @ < KBD > Ctrl < / KBD > @ + @ < KBD > ALT < / KBD > @ + @ < KBD > del < / KBD > @

Code block

 Using the @ < pre > < / pre > @ elements can also form code blocks

Bold italics

 @<b> @ markdown is also applicable here, such as @ * @ bold @ * @ @ < / b > for example@

Symbol escape

If you need to use the markdown symbol in your description, such as _ # * You can add a backslash before these symbols, such as \_ \# \* Avoid.

 @\_ @I don't want the text here to be italicized@\_ @You don't want the text here to be bold@\*\*@

extend

support Jsfiddle, gist, runjs, Youku Video , fill in the URL directly, after which the preview will be automatically added, and click to expand the relevant content.

 http://{url_ of_ the_ fiddle}/embedded/[{tabs}/[{style}]]/
https://gist.github.com/{gist_ id}
http://runjs.cn/detail/{id}
http://v.youku.com/v_ show/id_ {video_ id}.html

formula

When you need to insert a mathematical formula into the editor, you can use two dollar signs @ $@ @ to wrap the math formula in tex or latex format. After submission, mathjax will be loaded on the Q & A and article pages as needed to render the mathematical formula. For example:

 @$$@!! !!x = {-b \pm \sqrt{b^2-4ac} \over 2a}.!! !!@$$@

@$$@
x \href{why-equal.html}{=} y^2 + 1
@$$@

It also supports HTML attributes, such as:

 @$$@!! !!(x+1)^2 = \class{hidden}{(x+1)(x+1)}!! !!@$$@

@$$@
(x+1)^2 = \cssId{step1}{\style{visibility:hidden}{(x+1)(x+1)}}
@$$@

Playground