Post thumbnail: 24 Sublime Text Plugins/Packages For HTML

Tags      sublime text code editor html


24 Sublime Text Plugins/Packages For HTML

Collection of Sublime Text Plugins/Packages for HTML: essentials, preprocessors/templating, frameworks, prettification.

Table Of Contents

  1. Essentials
  2. Preprocessors/Templating
  3. Frameworks
  4. Prettification

Essentials

Demo image: HTML5

HTML5

Add HTML5 syntax mode & snippets to Sublime Text.

github page

Instead of formal documentation, tab triggers for each HTML5 tag are the same as the tag, for example <time> expands to <time datetime="${1:2011-01-12}">${2:January 12th, 2011}</time> (where the $1{...} parts are editable placeholders once you have triggered the snippet).

Demo image: HTML Snippets

HTML Snippets

A set of custom HTML snippets for Sublime Text.

github page

Type the snippet shortcode and then press Tab to complete the snippet.

Demo image: HTML Boilerplate

HTML Boilerplate

Sublime Text 2/3 snippet to generate HTML5 boilerplate.

github page

With a blank saved HTML file open, type htmlboiler and press TAB.

Preprocessors/Templating

Demo image: Haml

Haml

Syntax and snippets for Haml.

github page

Forked from the Handcrafted Haml TextMate Bundle.

Demo image: HTML2Haml

HTML2Haml

Converts files, selection and clipboard content from HTML or ERB to HAML using html2haml.heroku.com API.

github page

Convert whole ERB or HTML file, convert selection, convert clipboard content.

Demo image: Jade/Pug

Jade/Pug

A comprehensive textmate / sublime text bundle for the Jade template language.

github page

This was made specifically for Sublime Text 2, but was tested and works with Textmate 2 and Sublime Text 3.

Demo image: Bootstrap 3 Jade Snippets

Bootstrap 3 Jade Snippets

Twitter Bootstrap 3 Jade snippets.

github page

A Sublime Text plugin complete with Twitter Bootstrap 3 snippets.

Demo image: Ruby Slim

Ruby Slim

A Textmate/ Sublime Text bundle for Slim.

github page

This is the Textmate/Sublime Text bundle for Slim, based on the Handcrafted Haml bundle.

Demo image: HTML2​Slim

HTML2​Slim

Sublime Text 3 Plugin to convert HTML to Slim.

github page

Converts files, selection and clipboard content from HTML to Slim using http://html2slim.herokuapp.com/html2slim.json API.

Demo image: HTML Mustache

HTML Mustache

Adds HTML Mustache as a language to Sublime Text 2/3, with snippets.

github page

Syntax file obtained from mwunsch's sublime repo. Supports .mustache, .mst, .hjs, and .hgn (Hogan) files.

Demo image: Handlebars

Handlebars

Atom and Sublime Text 2/3 Handlebars.js bundle.

github page

Colours of Handlebars expressions are selected to be in contrast with the surrounding HTML. Handlebars expressions get syntax highlighting in HTML attributes. Parameters passed to block expressions get syntax highlighting too. Works both with individual template files and inline templates in script tags.

Frameworks

Demo image: Bootstrap 3 Snippets

Bootstrap 3 Snippets

Twitter Bootstrap 3 snippets plugin for Sublime Text 2/3.

github page

Start typing bs3 in html files and the autocomplete window opens. It matches fuzzily. So you can type bs3radio to find the bs3-input:radio snippet.

Demo image: Bootstrap 3 Autocomplete

Bootstrap 3 Autocomplete

Bootstrap 3 autocomplete for Sublime Text 3.

github page

Sublime Text autocomplete plugin for Bootstrap 3.

Demo image: Bootstrap 4 Snippets

Bootstrap 4 Snippets

Bootstrap 4 snippets for Sublime Text 2/3.

github page

A sublime plugin complete with Bootstrap 4 snippets.

Demo image: Bootstrap 4 Autocomplete

Bootstrap 4 Autocomplete

Bootstrap 4 autocomplete for Sublime Text 3.

github page

Sublime Text autocomplete plugin for Bootstrap 4.

Demo image: Foundation 5 Snippets

Foundation 5 Snippets

ZURB Foundation 5 Sublime Text 2/3 snippets.

github page

Each snippet is prefixed with zf- (ZURB Foundation). Each snippet is singular, unless the name of the component ends in an s (offcanvas). Available classes are included as comments in the snippets.

Demo image: Foundation 6 Autocomplete

Foundation 6 Autocomplete

Zurb Foundation 6 autocomplete for Sublime Text.

github page

Sublime Text autocomplete plugin for Foundation 6.

Demo image: Semantic UI

Semantic UI

Snippets for the Semantic UI framework.

github page

Sublime Text snippets for the Semantic UI framework. All command completions are prefixed with ui, typing dash-connected class names should trigger the element of choice.

Demo image: Bulma CSS Framework Autocomplete

Bulma CSS Framework Autocomplete

Sublime Text autocomplete plugin for the Bulma CSS Framework.

github page

Created based on UIKit plugin.

Demo image: Materialized CSS Snippets

Materialized CSS Snippets

Materialized CSS package for Sublime Text 2/3.

github page

This Materialized Sublime Text plugin contains snippets of Materialized CSS components.

Demo image: UIkit Autocomplete

UIkit Autocomplete

UIkit autocomplete for Sublime Text.

github page

Auto-complete plugin for UIKit classes and attributes.

Prettification

HTML-CSS-JS Prettify

HTML, CSS, JavaScript and JSON code formatter for Sublime Text 2 & 3 via Node.js.

github page

This is a Sublime Text 2 and 3 plugin allowing you to format your HTML, CSS, JavaScript and JSON code. It uses a set of nice beautifier scripts made by Einar Lielmanis. The formatters are written in JavaScript, so you'll need something (node.js) to interpret JavaScript code outside the browser. This will work with either HTML, CSS, JavaScript and JSON files.

Demo image: HTMLBeautify

HTMLBeautify

A plugin for Sublime Text that formats (indents) HTML source code.

github page

It makes code easier for humans to read.

Minify

Minify for Sublime Text can create a minified version of a currently open CSS, HTML, JavaScript, JSON or SVG file.

github page

Minify depends on other programs written in Node.js to do its job.

Back to top