How Sublime Editor Can be Used For Blogging – Part 1

Sublime as a blogging tool
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.

[adsenseyu1]

Nidhi Rai

Nidhi Rai

Nidhi has been been actively blogging in different technologies such as AI / machine learning and internet technologies. Her field of interest includes AI / ML, Java, mobile technologies, UI programming such as HTML, CSS, Javascript (Angular/ReactJS etc), open-source and other related technologies.
Posted in Tools. Tagged with .