HTML Nested Comments source code snippet

Plugin: HTML Nested Comments

This project includes two plugins, one for Sublime Text and one for Atom. Most developers can agree that multiple text editors are a common part of the daily workflow. Sublime Text and Atom are my two primary text editors, and as a developer and instructor that spends a significant amount of time in the world of HTML, I found it hard to believe that both of these editors suffered from the same type of workflow issue when dealing with comments within source code.

The problem: if your HTML code contains a comment, and you want to add a new comment to temporarily disable a block or portion of code, the built in commenting functionality does not actually place the comment tags in expected locations. If an existing comment is included in the content being commented out, the first instance of a --> closing comment tag will end the entire comment.

example HTML code with comment issues
Sublime Text sample of HTML comment issue.

The solution: The plugin very simply finds all comments within the highlighted block of code and converts dashes to tildes, and then places the comment tags in the expected locations. The plugin also then reverses the effect to uncomment the same code.

example HTML code with comment issue solution
Sublime Text nested comments solution.

The Sublime Text version, written in Python, is available on GitHub and also through the Package Control repository. The Atom version, written in Coffeescript, is also available on GitHub and through the Atom package installer.