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:
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:
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:
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.