Markdown Previewer
Write headings, lists, links, tables and code in Markdown, watch the formatted result update, and copy the HTML when it looks right.
Este conteúdo está em inglês.
Preview
Exemplos resolvidos
Previewing a heading and bold text
# Welcome This is **bold** text.
A large heading reading "Welcome", followed by a paragraph reading "This is bold text." with the middle words in bold.
The symbols are not shown in the preview; they only tell the formatter which style to apply.
Previewing a bulleted list
- apples - pears
A bulleted list with two items: apples, then pears.
A blank line between a list and the text that follows it keeps the list separate, as the tips suggest.
Sobre Markdown Previewer
Markdown is a light way of formatting plain text. A hash sign makes a heading, two asterisks make bold text, a dash starts a list item and square brackets with a link address in round brackets make a link. It is used in README files, notes, forum posts and documentation because the source stays easy to read. Writing Markdown can still be hard to judge, though, because the result is only visible once it is converted. This previewer shows the formatted result beside your text and updates as you type, so you can see each change straight away.
The previewer covers the parts of Markdown people use most: headings, bold and italic text, links, bulleted and numbered lists, inline and block code, quotations, tables and horizontal rules. It is written to show HTML typed into the box as plain text, so pasted tags never change the layout, and only web, email links are turned into clickable links. When the preview looks right, press Copy HTML to take the matching HTML for use in a web page, a content system or an email.
Como usar Markdown Previewer
- Type or paste your Markdown into the box, replacing the sample text.
- Check the preview, which updates after every change, to see how the headings, lists and tables look.
- Review the HTML in the lower box if you need to see the code behind the preview.
- Press Copy HTML to copy the code, then paste it where you need it.
Usos comuns
- Writing a README file for a software project and checking it before it is published
- Drafting a blog post or product description and copying the HTML into a content system
- Checking how a table of prices will look before it is sent in a newsletter
- Learning Markdown syntax by seeing each symbol turn into its formatted result
Perguntas frequentes
What Markdown features does this previewer support?
It supports six levels of headings, bold and italic text, links, bulleted and numbered lists, inline code and fenced code blocks, block quotations, tables with optional column alignment and horizontal rules. Images, footnotes and task lists are not supported, and characters such as a dollar sign for maths are shown as typed.
Can I use HTML tags inside the Markdown?
No. Any HTML typed into the box is shown as plain text in the preview and in the copied code, so tags such as script or div never become part of the page. This protects the preview from unwanted content, but it also means you need to use Markdown syntax for formatting rather than raw tags.
Why does one of my links show as plain text?
Links are only created for addresses that start with https://, http:// or mailto:. Other kinds of address, such as a javascript: link, are shown as text so that they cannot run code when someone clicks them. Check that the address begins with one of the allowed starts and that it has no spaces.
Why is my table not forming?
A table needs a header row, a separator row of dashes beneath it, and pipe characters between the cells. Each row should be on its own line, and the table ends at the first blank line. Adding a colon to the dashes aligns a column to the left, to the right or in the centre, as the sample shows.
Is the copied HTML the same as the preview?
Yes. The HTML is generated from the same text as the preview, so the layout you see is what the copied code will produce. The code uses plain elements such as headings, paragraphs, lists and tables, which means you can style it with your own page design.