Markdown to HTML online tool and export with directory

Key points of this article

Arrange the title hierarchy before exporting. First-level, second-level, and third-level titles should be used in order. Skipping levels will mess up the directory hierarchy.
The HTML table of contents is implemented by the id anchor of the title, and the links in the table of contents should point to the corresponding id.
After pasting the content in the UniDoc web editor, export the HTML and open it with a browser for verification.
When the directory is missing or cannot be clicked, add unique IDs to the titles, and then write the corresponding link list at the beginning.
Tables, code blocks, charts and formulas must be checked one by one after being exported, and sensitive content should not be uploaded at will.

If you have a manual, technical notes or course handout written in Markdown and want to publish it as a web page, there are usually two requirements: the title level, tables and code should be retained, and you should be able to click on the table of contents to jump to the corresponding chapter. Most readers who search for "Markdown to HTML online tool" or "markdown file to HTML" are stuck at this step: the converted page has no table of contents, or the table of contents link cannot be clicked.

This article talks about how to export Markdown to HTML online and make the page have a usable table of contents. After reading, you can judge which method is suitable for you, know what to prepare before exporting, how to check after exporting, and how to remedy the missing directory.

Unlike exporting PDF or Word, HTML itself is a web page, and the table of contents relies on the anchor point of the title. Understanding this will make subsequent operations much clearer.

How to convert Markdown to HTML with table of contents? One sentence conclusion

First organize the title hierarchy in the editor, and then export the HTML; use a browser to check the table of contents after exporting. If the table of contents is missing or cannot be clicked, add a unique ID to each title and let the table of contents link point to it.

your situation	Recommended practices	reason
The file only has a few sections and I want to put it on the web page quickly.	Paste content in UniDoc web editor and export HTML	Few steps, titles and tables can be retained
The document is long, you need to click the directory to jump	Check the directory after exporting; manually fill in the id and link if there is no available directory	Ordinary web pages will not automatically generate jumpable directories, and the anchor points must be aligned with the links.
Content contains flow charts, chemical structures or formulas	Before exporting, make sure these contents are displayed normally in the editor.	If the content with charts is missing, it will be difficult to find the reason after exporting.
Need to send it to others to read online	Use the editor's share link, or send the HTML file directly	Select according to the other party's access conditions to avoid being unable to open the file.
I just want to preview it locally	Open the exported HTML file directly with a browser	No need to upload, easy to check

Before you start: Confirm these points first

Whether the title level is standardized. The table of contents is organized according to the title hierarchy, using # for first-level titles, ## for chapters, and ### for subsections. Jumping directly from level one to level three will cause the directory to be indented and messed up.
Whether it contains charts and formulas. Flow charts, chemical structures and mathematical formulas must be confirmed to be displayed before exporting. Missing content will not report an error in HTML and can only be discovered with the naked eye.
Are the tables and code blocks complete? The number of columns in the table and the starting and ending symbols of the code block are areas that are prone to problems when exporting. Read them through in the editor first.
Who should the page be shown to? If you want to see it only for yourself, a local browser is enough; if you want to send it to others, you must consider the sharing method and whether the other party can open the file.
Whether the content contains sensitive information. Remove keys, account numbers and internal addresses before uploading to any online tool.

# steps to Export HTML in UniDoc Page Editor

Open app.unidoc.top and enter the UniDoc page editor.

two. Paste the Markdown content into the editor. When the file is long, it can be pasted in segments, and after pasting, check whether the title symbols such as# are still there.

Check the title level one by one. The first-level title is only used for the article title, the second level for the chapter and the third level for the section.
Check that tables, code blocks, charts, and formulas display properly. If there is any problem, correct it in the editor before moving on to the next step.
Select Export to HTML format and download the file. The editor supports lossless HTML export, which is suitable for preserving the original structure.
Open the downloaded HTML file in your browser and scroll through it from beginning to end.
Check to see if there is a catalog on the page. If so, click a few confirmation items to jump; if not or do not click, go to the next section to add.
When you need to share, use the editor's sharing link, or send the HTML file to the other party.

# how to make up if the directory is missing or cannot be clicked

Jumps in HTML depend on anchors. Each title should have a non-repeating id, and the links in the directory will be written in the form of "pound sign plus id". After clicking, the page will scroll to the corresponding location. If the export results already have available directories, you can skip this step.

- add id to the title. add the id attribute to the title tag, for example, write the secondary title with id="install", and the text is still "installed". Id uses only letters, numbers and hyphens, and do not repeat them on the same page. Write a list of directories at the beginning of the document. each item is a link, the text is the name of the chapter, and the link points to the corresponding id. The child title is placed below the parent title and indented one layer. - refresh the browser after saving and click one by one. each item has to jump to the right place, and there is a jump error, usually due to id spelling inconsistency or repetition. - * if you find it troublesome, first add anchor points to only the first and second headings. With few levels, it is easy to change, and it is enough to read.

Many conversion tools will automatically generate id for the title, so take a look at the exported source code or page structure before you start, which can save a lot of time.

# check item by item after completion

Check item	What do you think?	What if there's a problem?
Title level	Is the level of the catalogue consistent with that of the original	Go back to the editor to adjust the number of title symbols
Form	Whether the number of columns and contents are complete	Modify the table in the editor and re-export
Code block	Whether indentation and line wrapping are retained	Check whether the start and stop symbols appear in pairs
Pictures and charts	Whether it can be displayed normally.	Check that the picture address is accessible and reinsert it if necessary
Formula	Are the symbols and superscripts correct?	Re-export after correcting formula syntax
Directory link	Whether to skip to the corresponding title after clicking	Check if id is duplicated or spelled inconsistently
Chinese display	Whether there is garbled code	Confirm that the source file is saved in UTF-8 encoding

# Core comparison

Practice	Suitable for the scene	Need to pay attention to
Online editor export HTML	The structure of the document is complex, so I want to keep the original format.	The title needs to be sorted out first and still need to be checked after export.
Online conversion website	I just want to get a web file quickly.	Check file size limits, watermarking, privacy policy, and typesetting
Save desktop office software as web page	It is not convenient to upload files to the network.	Catalogs and styles may be different than expected and need to be checked locally
Handwritten HTML	Need to have complete control over the page structure	Heavy workload, suitable for readers who are familiar with HTML

# frequently asked questions (FAQ)

1. Can the pages transferred from Markdown to HTML online tool be published directly?

Can be used as the basis for static web pages, but use your browser to check directories, pictures, tables, and links before publishing. Files involving sensitive content are not recommended to be uploaded to any online tools.

2. What should I look at when choosing an online conversion tool?

See whether the file size limit, whether the exported file is watermarked, the description of the file retention period in the privacy policy, and whether tables, code blocks, and formulas can be retained. These items better reflect the actual usability than simply "free".

3. What should I do if the garbled code occurs after the markdown file is transferred to HTML?

First verify that the source file is saved as UTF-8 encoding, and then check to see if UTF-8 is declared in the header of the HTML page. If you still have a problem, resave the source file with a text editor before exporting.

4. Manually added directory, what should I do after changing the title?

After the title text or hierarchy changes, modify the corresponding id and directory links synchronously. Click on the directory again after each change to make sure there is no mistake.

# Summary

The Markdown to HTML online tool deals with format conversion, and whether the directory can be clicked depends on the anchor point of the title. Sort out the title level, export and check item by item, and then add id and links as needed, you can get a clear structure, you can jump to the HTML page.

Open OmniDoc, convert and organize your documents