Creating Gists In PHPStorm
I think we all know how great code block syntax looks on Medium.com articles. I used to host my own blog mainly for this very reason: I could control how my code samples looked in my blog posts while hosted blog solutions never did a good job in that area. They either didn’t have any way to add a code block or didn’t highlight the code in my language of choice. But even if you can’t select a particular language in your blog tool of choice, you’d think basic things like functions and variables would at least have good contrast in colors applied to them.
…But you’d be wrong. In Medium, what you get is a gray background with slightly darker gray text. This screams “I am an elite developer; please follow my brilliant code and ideas.” Not! I was embarrassed the first time I wrote a blog post and used the default code block option Medium provides, and I’m still embarrassed every time I’m lazy enough to leave one of those blocks in a post. There are a few other options to embed code into your posts, but I only tried one.
Enter GitHub Gists
I saw that you could embed GitHub Gists within Medium as well as CodePen and JS Fiddle thing-ys, but don’t quote me on the last two…I did just call them thing-ys. Since I use GitHub everyday and already have all my code hosted there, Gists seemed like the obvious choice.
…And that is how much better the code at the beginning of this blog post looks rendered as a Gist. Since I added the file with a .sh extension, GitHub is smart enough to add Bash syntax highlighting. I think it looks much more professional than before, don’t you?
The only issue you’ll run into is long line scrolling off of the screen, but you probably feel bad about that already and your IDE tells you to fix those lines of code anyway. I shamefully turn off rules like that myself. Oh yeah, monitors have gotten bigger than 80 characters over the years, fancy that…There is an option to “soft wrap” code and maybe that will work for you. Or not. It’s a hosted blog solution after all. We are all at their mercy.
I even created that Gist straight from PHPStorm. Watttt?!?! Crazy talk! And it was surprisingly easy. I kick myself everyday for not learning more IntelliJ shortcuts and tools. For example, you can enter cmd+/ after selecting a code block and comment or uncomment the block. I used to manually add all of the single-line or block comments, and it certainly took longer than one shortcut. D’oh! Maybe one of these days I’ll actually read one of those tips at startup.
PHPStorm Integration
So how did I accomplish this? Well, first of all, it didn’t have anything to do with me. All of the credit goes to the Jet Brains team. Thanks a lot peoples! I am a loyal PHPStorm user who considered switching entirely to VS Code but stayed because I keep finding great hidden nuggets deep within the beast. Plus, JetBrains helps out open source projects a lot. If you are a contributor to FOSS, you might want to check their open source license policy.
I was about to try and “fix” my Medium code block with a Chrome extension of all things: https://github.com/alexfinnarn/chrome-gists. While I still think it would be a good idea to create that extension, who has the time these days for that? As Miss Sweet Brown reminded us in a very succinct manner…
Who knows, I might actually get back to working on that project some day, but for now, PHPStorm has made it so easy for me to create Gists that I don’t need to.
One really nice feature is the ability to create Gists from lines of code, not just entire files. Since my blog posts always reference code that I have in some repo on my local machine, I can open the needed file and create several Gists including only the lines I am referencing in the post.
When I manually added Gists to posts, I had to copy the code out of my IDE, start a new Gist, paste it in the body field, and then follow the same steps again for my next Gist segment of code. I also had to remember the file names so I could try and get back to the links and keep them in order.
Now, I can just select a block of code in PHPStorm, right-click, choose “Create Gist…”, change my filename if needed, and add a description. When I click “Okay”, I get to see the new Gist in my browser of choice so I can easily copy the link over to Medium.
With this method, I can queue up several code blocks from a file or set of files all at the same time. I often add small code blocks from the same file to illustrate points in posts and keep https://gist.github.com/alexfinnarn open in another browser tab to copy those links.
And that’s all there is to it. Hopefully you are super pumped to not have to ditch Medium just because of onerous code sample generation workflows. I know I am! Thanks to JetBrains I now have more free time to code FOSS projects.
