How Sublime Editor Can be Used For Blogging – Part 1

This article represents tips on how one could use Sublime Text Editor for writing their blogs in quicker manner. More so, if you are a developer and love blogging, you would find Sublime handy as you could write blog like coding by creating custom snippets as described later in the article. 🙂 The reason I have put this article as “Part 1” is because I believe I shall come across more such tips & techniques as I go ahead with my experience with Sublime and, I shall share them as another blogs. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.

I also came across one similar article on How Sublime can be used as a blogging tool, that you may want to check.

Following are the key points described later in this article:

• Common Use-case Scenarios for Blogging
• Tips to Configure Sublime as a Blogging Editor

Common Use-case Scenarios for Blogging

Listed below are common use-case scenarios where in Sublime could prove to be very useful.

• Custom Blog Templates: Our blogs falling in different categories tends to follow a specific set of custom text and styles including a combination of heading, ordered/unordered list, divs etc. This is where one could one or more Sublime snippets where each snippet can represent a particular blog template. For example, following could be one snippet for a blog template. With below snippet, you create a new empty HTML file in sublime and write “blogtemp” & CTRL + “space bar” and the code below appears. You could start writing your blog right away based on this template.

  <snippet>
   <content><![CDATA[
  <div>This article describes $1.</div>
  &nbsp;
  <div>
   Following are the key points discussed later in this article:
   <ul>
    <li>$2</li>
    <li>$3</li>
   </ul>
  </div>
  &nbsp;
  <div>
   <h6>$4</h6>
  </div>
  ]]></content>
   <tabTrigger>blogtemplate1</tabTrigger>
   <scope>text.html</scope>
  </snippet>

• Ordered/Unordered Lists: Several times while blogging one needs to list down one or more points. This is where one need to create ordered/unordered lists using ul/ol and li tags. Take a look at sample sublime code snippet below:

  <snippet>
   <content><![CDATA[
  <ul>
   <li>$1</li>
   <li>$2</li>
  </ul>
  ]]></content>
   <tabTrigger>blogul</tabTrigger>
   <scope>text.html</scope>
  </snippet>

• Custom Style – Heading with Spacing/Padding: At times, we use custom styles for putting headings in the blog along with custom spacing/padding.
• Code blocks: At times, based on plugin one use for putting the source code, one needs to write code appropriately (with pre & code element).

Tips to Configure Sublime as a Blogging Editor

You could create a Sublime custom snippet based on following instructions:

• In Sublime Text Editor, go to Tools > New Snippet. A new untitled file consisting of following code would open. Paste one of the code snippet shown above in the article.

  <snippet>
   <content><![CDATA[
      Hello, ${1:this} is a ${2:snippet}.
      ]]></content>
      <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
      <!-- <tabTrigger>hello</tabTrigger> -->
      <!-- Optional: Set a scope to limit where the snippet will trigger -->
      <!-- <scope>source.python</scope> -->
  </snippet>

• Give an appropriate name within “TabTrigger” element. This would be name you would write in the editor followed by ctrl + “space bar” to autocomplete. I put the name such as “blogtemplate1”. The code would look like following:

  <tabTrigger>blogtemplate1</tabTrigger>

• Write the source type as “text.html” within scope element. The code would like following:

  <scope>text.html</scope>

• Once done with above steps, its time to save the file. The file name must end with .sublime-snippet. You could choose format such as filetype-triggername.sublime-snippet. For above, I used filename such as html-blogtemplate1.sublime-snippet
• Close and re-open the sublime. Test by writing “blogtemp” and ctrl + “space bar” to see autocomplete option. You shall find your snippet displayed for selection.