- Sublime Text Markdown Live Preview
- Sublime Text Markdown Live Preview
- Sublime Text Markdown Editing
- Sublime Text Markdown Preview
- When I use Sublime Text to edit Markdown files, I appreciate the Syntax Highlight provided by Markdown Light plugin, but just like built-in and other Markdown plugins, they can’t provide auto.
- Atom is good, especially for markdown preview to keep the same format as the final. This is a notes about how to install packages in sublime text 3.
- Mostly notes for myself:Install Package Control alphaInstall the Markdown syntax coloringInstall Markdown PreviewInstall Live ReloadInstall LESS syntax highlightingInstall CoffeeScript, Jade.
Sublime Text 3 (ST3) is lightweight, cross-platform code editor known for its speed, ease of use, and strong community support. It’s an incredible editor right out of the box, but the real power comes from the ability to enhance its functionality using Package Control and creating custom settings.
In this article, we’ll look at how to setup Sublime Text for full stack Python development (from the front to back), enhance the basic functionality with custom themes and packages, and use many of the commands, features, and keyword shortcuts that make ST3 so powerful.
Ayu is a simple theme with bright colors and comes in three versions — dark, mirage and light for all day long comfortable work. Ayu from version 3.0.0 supports customization via A File Icon package.
This tutorial assumes you’re using a Mac and are comfortable with the terminal. If you’re using Windows or Linux, many of the commands will vary, but you should be able to use Google to find the answers quickly given the info in this tutorial.
Before we start, let’s address what I mean exactly by “full stack”.
In today’s world of HTML5 and mobile development, Javascript is literally everywhere. EVERYWHERE. Python coupled with a framework such as Django or Flask is not enough. To really develop a website from end-to-end, you must be familiar with Javascript (and the various Javascript frameworks), REST APIs, responsive design, and of course HTML and CSS, among others. And let’s face it: Like any craftsman, in order to be the best programmer you can be, your tools must be sharp. Your development environment must be setup for full stack development – which is exactly what we are going to do right now…
Features
Let’s start by looking at a few of the default features of Sublime Text 3…
Split Layouts allow you to arrange your files in various split-screens. This is useful for test driven development (Python code on one screen, test scripts on another) or when working on the front end (HTML on one screen, CSS and/or Javascript on another).
Vintage Mode provides you with vi commands for use within ST3.
- Chrome-like Tabs make navigating and editing several files much simpler.
- Automatic loading of the last session re-opens all files and folders you had open when you closed the editor the last time. I leave ST3 open all the time, with various projects open – so if I reset the computer, it opens the files and folders right back up.
Code Snippets increase your productivity by giving you the ability to create common pieces of code with a single keyword. There are a number of default snippets. For example, open a new file and type in “lorem” then press tab. You should get a paragraph of lorem ipsum text. Also, if you type “defs” then press tab in a Python file it will setup a generic function.
You can also create your own snippets: Tools > New Snippet. Refer to the documentation for help, and also check out some of my snippets here.
Customizing Sublime Text 3
After downloading ST3 …
Install the subl command line tool
Like the mate command for TextMate, Sublime Text includes a command line tool called subl that allows you to open one file, or an entire directory of files and folders, from the terminal.
To enable this command, create a symbolic link to the subl binary:
Ensure that the link works by opening Sublime:
If that didn’t work, you probably need to add /bin to your Path:
Then repeat step one.
If you are still having trouble, check out this article for help. Also, here are links for help on creating the symbolic links in Windows and Linux.
Now you can open a file or directory using the following commands:
If there are spaces in the path, you must surround the entire path in double quotes:
To view all the commands, open up the help file:
Install Package Control
To begin taking advantage of the various packages for extending Sublime’s functionality, you need to install the package manager called Package Control – which you must install manually. Once installed, you can use Package Control to install/remove/upgrade all other ST3 packages.
To install, copy the Python code for Sublime Text 3 found here. Click View > Show Console to open the ST3 console. Paste the code into the console. Press enter. Reboot ST3.
You can now install packages by using the keyboard shortcut cmd+shift+P. Start typing install until Package Control: Install Package appears. Press enter and search for available packages.
Some other relevant commands are:
- List Packages shows all your installed packages
- Remove Packages removes a specific package
- Upgrade Package upgrades a specific package
- Upgrade/Overwrite All Packages upgrades all your installed packages
Check out the official documentation to view more commands.
Create a Custom Settings File
You can fully configure Sublime Text using JSON-based settings files, making it easy to transfer, or synchronize, your customized settings to another system. First, we need to create our customized settings. It’s best to create a base file for all environments as well as language-specific settings files.
To set up a base file click Sublime Text > Preferences > Settings – User. Add an empty JSON object to the file and add your settings like so:
For language specific settings click Sublime Text > Preferences > Settings – More > Syntax Specific – User. Then save the file using the following format: LANGUAGE.sublime-settings. So, for Python-specific settings, save the file as Python.sublime-settings.
You can obviously configure your settings to your liking; however, I highly recommend starting with my base and Python-specific settings – then making changes as you see fit.
Optional: You can use Dropbox to sync all your settings. Simply upload your settings files to Dropbox and load them from there to sync the Sublime environments on all your machines.
A good reference for settings can be found at the Sublime Text Unofficial Documentation.
Sublime Text Markdown Live Preview
Themes
ST3 also gives you the option to change the overall theme to better suit your personality. Design your own. Or, if you’re not artistically inclined, you can download one of the various custom themes designed by the Sublime community through Package Control. Check out ColorSublime to preview themes before installing them.
The ever popular Soda Dark Theme and the minimal Flatland are two of my personal favorites.
After installing a theme, make sure to update your base settings, Sublime Text > Preferences > Settings – User:
Packages
Besides the packaged themes, I take advantage of the following packages to speed up my workflow.
SideBarEnhancements
SideBarEnhancements extends the number of menu options in the sidebar, speeding up your overall workflow. Options such as “New file” and “Duplicate” are essential and should be part of ST3 out of the box. The “Delete” option alone makes it worth downloading. This feature simply sends files to the Trash, which may seem trivial but if you delete a file without it, it’s very difficult to recover unless you’re using a version control system.
Download this now!
Anaconda
Anaconda is the ultimate Python package; it adds a number of IDE-like features to ST3 including:
You can view all of the features here, or within the README file in ST3’s Package Settings: Sublime Text > Preferences > Package Settings > Anaconda > README.
SublimeCodeIntel is another popular package, which has many of the same features as Anaconda. I suggest testing them both out.
Djaneiro
Djaneiro supports Django templating and keyword highlighting and provides useful code snippets (tab completions) for Sublime Text. The snippet system is an incredible timesaver. You can create common Django blocks with only a few keystrokes for templates, models, forms, and views. Check out the official documentation to see a list of snippets.
My personal favorites are for templating: var creates {{ }} and tag creates {% %}
requirementstxt
Requirementstxt provides autocompletion and syntax highlight-lighting as well as a nice version management system for your requirements.txt files.
SublimeLinter
SublimeLinter is a framework for ST3 linters. The package itself does not include any actual linters; those must be installed separately via Package Control using the SublimeLinter-[linter_name] naming syntax. You can view official linters here. There are also a number of third party linters, which can be viewed in Package Control. Check out the installation instructions here.
For Python linting, I recommend using SublimeLinter-pyflakes and SublimeLinter-pep8.
I also use SublimeLinter-jshint, SublimeLinter-pyyaml, SublimeLinter-csslint, SublimeLinter-html-tidy, and SublimeLinter-json.
Most of these linters have dependencies associated with them, so please read the installation instructions before installing.
You can customize each linter in the user-defined SublimeLinter.sublime-settings file: Sublime Text > Preferences > Package Settings > SublimeLinter > Settings – User. For example, I ignore the following pep8 errors and warnings:
GitGutter
GitGutter shows little icons in ST3’s gutter area that indicate whether a line has been inserted, modified, or deleted since the last commit.
If you want support for a number of distributed version control systems (Git, SVN, Bazaar and Mercurial), check out Modific
FTPSync
FTPSync syncs your project with your remote files. Simply open the file to download it (if the remote file is newer than your local file) and upload it to your remote server with every save. Great way to keep your local and remote(s) in sync. You’ll want to make sure to add at least one remote connection by clicking Sublime Text > Preferences > Package Settings > FTPSync > Setup FTPSync.
Sample settings:
I personally set the password to null because I don’t want it visible in that file. FTPSync just asks for my password after each save.
AdvancedNewFile
AdvancedNewFile is used to create a new folder or file from within ST3 with key bindings alone:
Simply bring up the AdvancedNewFile input through the appropriate key binding. Then, enter the path, along with the file name into the input field. Upon pressing enter, the file will be created. In addition, if the directories specified do not yet exist, they will also be created. By default, the path to the file being created will be filled shown in the status bar as you enter the path information.
For a more detailed explanation on its usage, check out the documentation on Github. Be sure to read about Tab Completion as well as Predefined Aliases.
Sublime Text Markdown Live Preview
I replaced the normal “cmd+n” command to create a new file with AdvancedNewFile by adding the following code to the Key Bindings – User file: Sublime Text > Preferences > Package Settings > AdvancedNewFile > Key Bindings – User:
You can also setup a default directory to start with: Sublime Text > Preferences > Package Settings > AdvancedNewFile > Settings – User
Now when I create a new file, the /Users/michaelherman/Documents/repos string is automatically inserted first, since 99% of the time I store all my scripts in that directory.
Emmet
Emmet, previously known as Zen Coding, uses simple abbreviations to generate HTML or CSS code snippets.
For example, if you type a bang, !, then press tab in an HTML file ,the HTML5 doctype and a few basic tags are generated:
Check out the official documentation as well as this handy cheat sheet for more info.
Markdown Preview
Markdown Preview is used for previewing and building markdown files.
To use, open the Package Manager then type Markdown Preview to show the available commands:
- Markdown Preview: Python Markdown: Preview in Browser
- Markdown Preview: Python Markdown: Export HTML in Sublime Text
- Markdown Preview: Python Markdown: Copy to Clipboard
- Markdown Preview: Github Flavored Markdown: Preview in Browser
- Markdown Preview: Github Flavored Markdown: Export HTML in Sublime Text
- Markdown Preview: Github Flavored Markdown: Copy to Clipboard
- Markdown Preview: Open Markdown Cheat sheet
Once converted, the output file is updated on each subsequent save.
Keyboard Shortcuts
- Goto Anything (“cmd+p”) is used for quickly finding and opening files. Just type in a part of a path and filename within a project and you can easily open that file. This is great for quickly opening files in large Django projects.
- Goto Line Number (“ctrl+g”) takes you to a specific line number in an active file.
- Goto Symbol (“cmd+r”) lists all functions and classes within a file to make them easier to find. Simply start typing the one you want.
- Go to beginning of line (cmd+left-arrow-key) and Go to end of line (cmd+right-arrow-key)
- Delete current line (ctrl+shift+k)
- Multi-Edit is by far my favorite shortcut
- Select a word, press “cmd+d” to select the next same word, then press “cmd+d” again to select the next same word…
- Press “cmd+click” to create a cursor for editing every where you click
- Block select (“option+left-mouse-click) is used to select a block of text. Perfect for removing blank space when formatting a CSV file.
For more shortcuts, take a look at this article.
Custom Commands
It’s easy to write your own custom commands and key bindings with Python. I currently use …
- Copy the path of the current file to the clipboard – link
- Close all tabs except the active one – link
Install these by adding the Python files to your “/Sublime Text 3/Packages/User” directory via the file menu (Sublime > Preferences > Browse Packages), then opening the User directory. To complete the setup, bind them from the Key Bindings – User file (Sublime Text > Preferences > Package Settings > AdvancedNewFile > Key Bindings – User).
Additional Resources
Conclusion
Sublime Text Markdown Editing
I hope this article was helpful to you and that you were able to integrate some of the above packages and custom settings along with your own based on your personal preferences to improve your workflow. If you have any comments or suggestions of your own, please let me know in the comments below. Finally, check out the dotfiles folder in this repo to view all resources that I created.
Sublime Text Markdown Preview
Cheers!
Edits made by Derrick Kearney. Thank you!
Comments are closed.