Posting code snippets to Slack

A buddy of mine recently asked me how to post code to Slack and make it look
good. It wasn’t the first time this has come up either. Different folks have asked, not like the same person keeps bugging me about it 😛

Trying to explain things to him reminded me of how much of a pain in the ass it
can be trying to explain posting code snippets to Slack, in a Slack conversation.

The use of back ticks ends up triggering the code snippet, so trying to actually
show somebody what they should be doing requires taking screen captures to
properly express the message before it’s actually sent.

Also, non-developers don’t always know what a back tick actually is, so you end
up saying things like “you know, the key that has the tilde on it” followed up “no, the one with this ~ on it”.

You can usually get through after a few attempts at explaining the situation,
but like I said, taking the screen shots helps a ton. Instead of screen shots, I
prefer to link folks to a blog post of my own authoring 😉

So the code snippets in Slack actually come in a few different shapes and sizes:

In-line Code

When code is placed in-line, it will look something like this in the sentence.

To in-line code, you simply need to wrap the text in back ticks:

this line contains `code` that is in-line.

Block or “Fenced” Code

Similar to in-line code, a block of code or “fenced” code, requires more than a
single back tick around it to work.

For blocks of code, you will need to wrap the code in three back ticks:

this is a whole mess of code
it has been fenced in

Unlike GitHub Flavored Markdown, you cannot specify the programming language you would like to use for any syntax highlighting. In fact, code blocks like this never include syntax highlighting, that’s where our next type comes in.

Also worth noting, when typing out multiple lines of text in Slack, you will need to hold SHIFT before hitting ENTER to add in a line break, instead of actually sending the message.

Code or Text Snippets

For the times when you need syntax highlighting, you will want to use Slack’s
built in code or text snippet option.

To use this code type, you will need to click the “+” on the left side of where
you type in your message. This will bring up a dialog which you can type out
your code or paste into directly.

When adding code here, any back ticks will be treated as actual characters to
display, so you don’t need to wrap your code in them at all.

If the code doesn’t to have syntax highlighting, you will want to edit it and then explicitly set the code type from the drop down in the upper right of the dialog.

Josh Sherman - The Man, The Myth, The Avatar

About Josh

Husband. Father. Pug dad. Musician. Founder of Holiday API, Head of Engineering and Emoji Specialist at Mailshake, and author of the best damn Lorem Ipsum Library for PHP.

If you found this article helpful, please consider buying me a coffee.