Sublime Text3 Markdown editing + real-time preview

The following tutorial column from sublime will introduce to you how to use Sublime to edit markdown and preview it in real time in the browser. I hope it will be helpful to friends in need!

Description

This article talks about how to use Sublime to edit markdown and preview it in real time in the browser.

If what you want is real-time preview in Sublime, this article may not be very applicable.

Let’s take a look at the renderings first:

Required plug-ins

● Markdown Editing

Mainly used for syntax highlighting when editing Markdown, with better visual effects

● Markdown Preview

Used to preview the effect in the browser

● LiveReload

Hot reload

Setup steps

1. Install Package Control (if already installed, please ignore this step)

1) Open the console

Use ctrl or View -> show console` to open the console.

2) Copy the following code into the console (or go to the official website to copy)

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

2. Install the plug-in

1) ctrl shift p and select Package Control: Install Packge

2) In the plug-in list, select search markdown preview

3) Repeat the above two Steps to install Markdown Editing and LiveReload respectively

3. Modify configuration items

1) Set enable_autoreload of Markdown Preview to true

Open Preferences – Package Settings – Markdown Preview – Setting, add in user settings:

{
    "enable_autoreload": true,
}

2) Enable LiveReload

Open ctrl shift p, enter LiveReload: Enable/disable plug-ins, select Enable: Simple Reload .

4. Set the preview shortcut key

Select Preferences — Key Bindings-User and add the following content:

{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }

The above is the detailed content of Sublime Text3 Markdown editing + real-time preview. For more information, please follow other related articles on the PHP Chinese website!