Markdown Preview Full Guide: GFM, Code Highlight and Secure HTML

1. Which of the Markdowns are you previewing?

Marktown is not a monogrammatic, but a monolingual dialect:

Page Titles and Scripts Emphasis Real-time GFM render and syntax highlight。 Toolbars provide:

• Base Template — Titles, Lists, Queues, Examples of Links
• Insert Table - GFM Header and Align
• Insert a code block - The tape. javascript Setd block for language tags
• Copy HTML - Copy right preview area innerHTML
• Clear - Empty the editor after confirmation

Left textarea Every input call renderMarkdown()； The subject is interchangeable. Process completed in browser.

Division of labour with "Turn HTML Tools"

• Markdown PreviewRead while writing, stress experience and highlight.
• Markdown Turn HTML: more directly when the task is focused on export/conversion.

Both of them may generate HTML; Available before entering site shell HTML Format Collapse indentation.

2. High frequency syntax and GFM points for writing

Title and level

Use # Present. ######Watch the back spaces. Preview Open headerIds , the title may be id, easy to access the anchor - not necessarily the same slug as GitHub, and the anchor link is randomly checked across the platform.

Emphasis, links, pictures

**Bold** and *Italic* and ~~Delete线（GFM）~~

[LinkText](https://example.com)
![Alternative text](https://example.com/a.png)

Pictures in Preview Area Limit max-width: 100%, the big picture can be scrolled.

Other Organiser

- NormalItem
  - 嵌套Item

1. Yes.序One.Item
2. Yes.序Two.Item

- [x] Completed
- [ ] Not completed

The task list is the common ability of the GM; Displays the text in the normal list in an old solver that does not support GFM.

Table

| Fields | Type | Notes |
| :--- | :---: | ---: |
| id | Int | Left Alignment / middle / Right |
| name | String | Username |

Second line. :--- Control alignment. The vertical line within the cell is to be transposed or avoided.

Code: Line and fence

Inline rows use a single inverted sign. The fence uses three inverted quotations and writes language id, the brightness is the point:

def greet(): print("Hello")

This page is for Prism already loaded language to go Prism.highlight, try the rest of the original output again highlightAllUnder。 Language names are often misspelled without any high-profile, but without prejudice to code text.

Line Break Policy (Presentation)breaks: true）

When opening the breaks, a single line break in the source code may become <br>, which is closer to the "chat/document" habit, but slightly different from the strict Markdown that "must be empty" is. If your target platform (e.g. some static generator)No, no.I'll change the line of business. <br>The preview is "seeming more fragmented" — based on the target platform, and only for reference purposes.

Quote and Horizontal Lines

> ReferencesParagraph
> I'm sorry.Two.Okay.

---

3. Safety HTML: Successful previews.

marked through parsed innerHTML Writes a preview node. This means:

1. Markdown Source If Original HTML Tabs are written directly, many configurations will enter DOM as they are.
2. The preview page is implemented by "your own context of the browser" The risk model is different when you copy the same HTML to the blog backstage, comment area, co-workers browser.
3. Copy HTML It's the result of the rendering.It's probably made of light. span And with class, it's not necessarily "minimity HTML".

Practical recommendations:

• MD submissions to users:Service end or credible pipe disinfection(DOMPURIFY AND SOON) Don't just say "we're all safe."
• Document repository: minimally embedded HTML; Use the short code agreed at the site when customizing the component.
• Do not copy HTML into the production page of an unreviewed third party README.
• Link to https； Watch out. javascript: with unquoted attribute (if nudity HTML is allowed).

This tool position is Author side previewNot the safety net. The guide must make this layer clear and avoid "prepare = go online".

4. Phased operation

1. Open /tools/dev/markdown-preview。
2. View Default Example(with list, GFM description, Python code block) Feels the left and right columns.
3. Empty or Overwrite - For your draft; Enter the rendering, without a separate "compilation" button.
4. Insert structure: Cursor point "insert Table" or "insert Block" and then replace it with business content.
5. Check GM: Checks the syntax, table alignment, and strikeout lines as scheduled.
6. Check code: Whether the language labels are effective for highlighting; Whether the long line can scroll horizontally.
7. Copy HTML (optional): Dot "Replicate HTML" to paste with the target editor; If you have to indent, turn. HTML Format。
8. Subject: The top right corner is to be bright/dark, avoiding "sweet in one context only".

Capacity boundaries

• Yes: GFM options, breaks, titles id, Prism Highlight, Template Insert, Copy HTML, Local Theme.
• Unguaranteed: A 100% match with GitHub for each edge case, mathematical formula, Mermaid, export PDF (the example of page where "export PDF" is marked as planned), complete XSS filter.
• Dependency: Marked and Prism on CDN; The offline environment requires a self-contained or local resource strategy.

5. Common issues and approaches

6. Real work scene

Scenario A: Write a self-censorship before GitHub README

Local preview of the form and the badge link (the emblem is a picture URL). Note the differences between breaks: ultimately, the requested page is followed by the GitHub to fine-tune the line.

Scene B: Design evaluation using "Description of semi-finished products"

Product adhesion MD needs, front end preview screen. Inserts a table description field, with examples of code blocks being placed on the interface. Avoids dropping formats in Improptu PPT.

scene C: From preview to site paragraph

Copy HTML → HTML formatted → paste CMS. Long-term content should remain in MD or CMS structured fields to avoid maintaining only the given HTML.

scene D: Teaching demonstration followed code

Toggle language labels to demonstrate highlighted differences; The emphasis is on "language labels are not decorations, but a reminder for readers and copyers".

scene E: Migration of old Wiki (Mix HTML+MD)

The text is a graphic, and the text is a graphic, and the text is a graphic, and the text is a graphic, and the text is a graphic, and it is a graphic, and it is a graphic, and it is a graphic, and it is a graphic, and it is a very clear, and it is a very clear, and it is a very clear, very clear, and it is a very clear, and it is a very clear, very clear, and it is a very clear, very, very, and very clear, and very clear, and it is a very clear, very, very clear, and very clear, and very clear, and it is a very clear, very clear, and very clear, and very clear, and very clear, that the text is a very clear, very clear, and very clear, and very clear, and very clear, and, as it is a very clear, a lot of the text of the paragraphs that are actually, actually, actually, and a very clear, and a very clear, and a very clear version of the text. Move to a pure MD or a valid short code to reduce the breakup of the future converter.

Scenario F: Mail/IM does not support MD

(a) Copying as plain text or HTML to an editor who only recognizes text after previewing the confirmation structure; Do not assume that the client is rendering GM.

8. How to select the tools

Selection tips:A preview of the text while reading; Batch export for HTML conversion; Format before generating it into the library; Upline volume recompressed.

FAQ

Teamwork and pre-publishing review

Markdown previews are suitable for fast-track confirmation structures, but team collaboration is also subject to fixed line breaks, list indents, code language tags and links. Opens the original text with the same previewer before submitting, checking for jumps in the title level, spills in the narrow screen, indicates language in the code block, and whether the relative link is still valid in the target repository. The preview results do not represent a certain consistency in the publication of the Platform, especially with regard to the differences in the way the Platform aligns footnotes, HTML, tasklists and tables. Keeps an original Markdown before official release and places the converted HTML in the build directory to facilitate roll-back and audit.

Continue reading

Dot " Base Template" is moved to line to look at changes on the right, insert tables and code blocks, and then copy HTML for formatting. When the target platform dialect is confirmed, the habits are written into the team document.