How to make a live preview of Markdown markup in Sublime Text?

Having set up Sublime Text 3 with the actions described below to preview Markdown, I write in this editor, for example, the answers to Stack Overflow, including this one.

Remove horizontal scroll bar in editable file

Install Markdown Editing plugin → open any Markdown file with md or mdown → Preferences → Settings - More → Syntax Specific - User . Delete the contents of the opened file, insert the following code instead:

 { "extensions": [ "md", "mdown" ], "wrap_width": "0", } 

That is, we added a parameter with the value "wrap_width": "0" . Instead of 0 I substituted other numbers, but at least 4147 , everything worked correctly.

The disadvantage of Markdown Editing is that when using the LanguageTool plug-in using Markdown-markup files, which use API calls to my opinion the best open source LanguageTool spell checker, all the typographical errors in the text are not highlighted .

We remove the horizontal scroll bar when displayed in the browser

I did not succeed with the first two plugins, if someone knows how to make them work the same way as Markmon, please report in the comments.

OmniMarkupPreviewer

Install the OmniMarkupPreviewer plugin. After Ctrl+Shift+P → OmniMarkupPreviewer: Preview Current Markup in Browser error page may open instead of a preview. To avoid it: Preferences → Package Settings → OmniMarkupPreviewer → Settings - User → insert the following code and save the file.

 { "renderer_options-MarkdownRenderer": { "extensions": ["tables", "fenced_code", "codehilite"] } } 

However, the horizontal scrollbar remains.

I asked in the issue tracker of this plugin on the GitHub how to cope with the problem, but did not receive a response.

Markdown Preview

Install the Markdown Preview plugin, run the preview. Instead of Cyrillic text in the browser, it may appear gibberish. In order to avoid them, you need to set the encoding in the edited file - <meta charset=utf-8> . You will also need to install LiveReload and enable synchronization when you save the file: Ctrl+Shift+P → LiveReload: Enable/Disable Plugins → Enable - Simple Reload .

Ctrl+Shift+P → Markdown Preview: Preview in Browser → markdown (if we select github , the cracks will not disappear):

In addition to explicitly specifying the encoding, in order to see the result in the browser, you will need to save the file; how to implement Live Preview with this plugin, which was requested by a respected topstarter, I did not find.

Markmon

Installing at least for Windows users can be difficult, so I’ll dwell on it in more detail:

• Download and install Node.js.
• Install Markmon by typing npm install -g markmon in the terminal.
• Through Package Control install Markmon plugin for Sublime Text 3.
• Download and install the text converter Pandoc .
• For Windows users: Preferences → Browse Packages... → manually create a sublime-text-markmon .

• Preferences → Package Settings → Markmon → Settings - User → paste the following code into the opened file and save the file:

   { //On Windows try "markmon.cmd" if you get errors. //If markmon is not on your path you'll need to use a full path to it "executable": "markmon.cmd", "port": 3002, "pandoc_path": "", "command": "pandoc -t HTML5 --mathjax", "stylesheet": null, "projectdir": null } 

Ctrl+Shift+P → Markmon launch → real-time preview available. The command line comes out, it should not be closed until viewing the Markdown markup in the browser is necessary for you, otherwise you will have to restart Sublime Text 3 itself.

A convenient solution, especially for live preview forms, is package GhostText . Suitable for any other markup, not necessarily Markdown.

1. Demonstration

Tested on:

• Windows 32-bit 10.0.14393,
• Firefox 47.0.

In the browser, a tab is opened with a page directly from this site that you are currently viewing - Stack Overflow in Russian. With the help of GhostText, I am writing this answer.

2. Description

You type text in Sublime Text. Exactly the same text appears in the form you choose on the site where you would enter the text using a web editor. Video from the developer , how GhostText works.

Supported Forms :

• <textarea> ;
• contenteditable , used, for example, in GMail;
• CodeMirror forms — for example, on Codepen.io, JSFiddle, JS Bin;
• Ace Editor Forms — used for example in Tumblr.

3. Benefits

1. If you accidentally close the browser, or it hangs, or turn off the light, or maybe the computer starts squeaking, it will need to be urgently turned off, etc., etc .; data entered by you into the browser may not be saved. Sublime Text saves the data of the previous session when restarted. In order not to accidentally close the tab where the text for GhostText is printed, I recommend using the Sticky plugin.
2. It’s better to preview how the result will look like in the end. In Markmon / Pandoc, as well as the rest of the parsers considered in my other answer , their own rules for formatting; on the sites where you post your text are already different. For example, what a demo from p. 1 would look like when previewing with Markmon.

Markmon, unlike Stack Overflow, does not allocate keys with the kbd tag and does not highlight the code after the <!-- language: lang-$компьютерный язык --> construct <!-- language: lang-$компьютерный язык --> . You can make the appropriate settings, but it is much easier to use GhostText.

3. Advanced text editors offer disproportionately more editing options than WYSIWYG.
4. Convenient division of the screen: on the one hand - the editor where the text / code is printed, on the other - the browser, where the result of the preview is visible. For example, in the Stack Overflow web editor, you notice a typo - you have to scroll from the preview to the edit form → correct the typo → go back to the preview. With GhostText, rewinding is not necessary.

4. Install addon

Starting from 1.24.2017, users simply go to the add-on page and download it like any other. Rebooting the browser is not required.

5. Manual installation

1. Restrictions

The method described in paragraphs. 5.2 and 6 will not work for new stable versions of Firefox.

Starting with the release of 48.0 in the stable version of Firefox, you cannot install unsigned add-ons . Despite numerous users perturbations , both thoroughly argued and obscene, the developers are not going to abandon the innovation. Given that expansion checks have to wait a month , I tend to agree with the comment “ how could you spoil everything overnight? ".

Nevertheless, the method continues to function in Firefox

• Develeper Edition,
• Nightly,
• ESR,
• Unbranded Builds.

Therefore, do not remove it from this answer. It can also be useful for understanding the overall picture of installing addons in Firefox.

2. Dependencies

It would be nice to get by just installing the package for Sublime Text and the add-on for Firefox . However, the addon does not work, and the developer apparently abandoned the project a long time ago.

Therefore, you will have to build and install an extension for Firefox yourself. This will require:

• anything you can clone the repository to yourself. Better git . I also recommend using the hub - add-on over git, which simplifies the introduction of its commands.
• Node.js along with npm, its package manager;
• nircmd for Windows, analog for Linux - xdtools ;
• XPI Compiler - an extension for Firefox;
• the GhostText package for Sublime Text itself. After installing the packages, just in case, always restart Sublime Text.

Add folders with executable files git , hub , npm and nircmd to the user or system PATH variable if they were not added automatically during installation. To simplify working with system / user variables on Super User, it is recommended to use the Rapid Environment Editor program.

6. Build

• clone the GhostText repository; If you are using a Hub, enter the hub clone GhostText/GhostText command at your convenience ;
• cd GhostText ,
• npm install ,
• npm run build .

Demonstration of the desired assembly behavior on AppVeyor.

If the build is successful, as in the demo, install the local add-on for Firefox. I could not compile xpi file using the recommended console jmp application , but I managed to find something better among Mozilla addons - XPI Compiler. In the address bar of Firefox, type about:xpiler → click on the folder with magnifying glass icon → choose $имя папки с клонированным GhostText\browser , for example, I cloned GhostText to the root of drive E , my path is E:\GhostText\browser . Click on the icon of the puzzle element with an arrow → the addon should be installed, you can start using it.

7. Known problems of GhostText

• To reconnect, you need to close all the tabs in the browser and Sublime Text, which used GhostText. Otherwise, failures may occur.
• Sometimes I have difficulty in establishing a connection for reasons not described in the plug-in repository's README.MD , but soon it is possible to successfully establish the connection again. If it does not work out long enough, write to the issue tracker GhostText.