Atom plugin for Hugo released!


#1

I’ve started creating a syntax highlighting plugin for Atom for use in Hugo.

You can download/install it at https://atom.io/packages/language-hugo

The repo is https://github.com/mattstratton/language-hugo

This is very much a WIP; I’ve only spent a little over an hour on it (I know this thanks to wakatime, and I plan to implement some more stuff, but I really would appreciate some testing!

Right now, it runs on HTML files and MD files; I’d really like to figure out a way to have it only implement the grammar if it can tell that it’s in a Hugo project (I haven’t much messed with that functionality yet) but it doesn’t seem to mess with my other projects too much :slight_smile:

Feedback (and PR’s!) totally welcome!


#2

Very cool @mattstratton I don’t use Atom, but I added your work here:

https://hugodocs.info/tools/editors/#atom

Thanks!


#3

Awesome! I’ll keep updating it based on feedback :slight_smile:


#5

This sounds interesting. I use atom for developing all my Hugo sites.

Can you give a bit more info on ‘what’ it actually highlights? The readme is a bit er… ‘sparse’.


#6

Good question! I’m about to jump on a plane, but I’ll enhance the readme.

From what I remember, it does a couple cool things:

  • Hugo comments are styled as comments (and can be enabled/disabled with the Atom commenting keyboard shortcut)
  • all Hugo template functions (well “most”; i probably missed some) are rendered as functions
  • frontmatter is styled prettily in .md files
  • HTML language stuff looks pretty in templates too
  • shortcode calls in .md files are prettified

What i still need to get working is indenting on control blocks like “range” and “if”; the auto-folding on them works fine IF you have proper indentation.


#7

Sounds good. I’ll take it for a spin.

Cheers!


#8

Thanks for making this @mattstratton. It’s very handy and I really appreciate it. Question: When using it, other HTML functions (autocomplete a div tag, for instance) don’t seem to work. Is that a setting somewhere to change that behavior?


#9

Can you log an issue with that on https://github.com/mattstratton/language-hugo/issues so I can track it? I definitely have a bunch more of improvements that can be done; collecting these issues in the bugtracker will make it a lot easier for me to pound them out!


#10

will do. And thanks again!


#11

In a word. Beautiful. Thank you, Mr. Stratton.


#12

Brilliant initiative … can’t wait to try it :slight_smile:


#13

This is really useful. Thanks so much! :slightly_smiling_face:


#14

More enticing visuals. @mattstratton you really undersold this thing! xD


#15

Wow that looks beautiful… Sounds about time I test Atom.


#16

Suggested community packages (besides language-hugo, of course):





#17

@jhabdas I’m an ST3 user for the last few years and have held off on Atom strictly because I’ve heard it’s so slow to start up. Has this improved? @mattstratton beautiful indeed. Awesome work!


#18

Indeed. 50% improvement with the latest release. Of course it’s running JS and not Python, so I’m not sure it’ll ever be as fast as ST3. FWIW I gave up my paid license for Sublime about a year ago after pairing with a junior dev a few times. He didn’t sell me on Atom. Atom sold me on Atom in our pairing sessions. Give it a week. Use the above packages. You’ll find developer bliss @rdwatters.


#19

apm install to install packages directly from a TTY.


#20

Just an idea based on Hugo now supporting Chroma highlighting:

What if we use Matt’s language-hugo package and convert it to Chroma?

Then the Hugo Docs website can have syntax highlighting with the same pretty (and very readable) highlighting that we see in the images above. That would look a lot better than the (at times depressing) grey that’s currently shown.


#21

Just about every day since I started using Hugo I pop in here and the skim the latest posts to see what else there is to learn. Finding this has been one of my favorites. Thanks for bumping it and of course for creating it.