Table of Contents
Flashback
When I was in college, a common question my English professors would ask me and my classmates is “Where are the examples?” and developers ask the same question when reading your tutorials on Dev.to. Now of course the answer to this would be to add code snippets from your sample projects, but what if I told you adding color to them will help them stand out? Adding color to your code snippets makes them look more appealing. Kind of like how adding seasoning or a squeeze of citrus to your meal makes it more flavorful. Still unsure? No worries, this guide will teach you two ways you can add color to your code snippets.
Method #1: Using backticks
If you want to add color to your code snippets in a quick way, the backtick method is for you. Here’s how to do it.
Step 1: add three backticks on top like this:
Step 2: Add your code snippet’s language name next to the top backticks. This helps organize your code snippet. For example, the code snippets in my Hashnode post, “3 Easy Uncommon Accessibility Techniques You Need to Know For Coding” are made with HTML. So if I were to cross-post in the article to Dev.to, here’s how the top backtick will look:
Step 3: Add your code snippet: Next, pick a code snippet you think best exemplifies the step in your coding tutorial. From there, copy and paste it underneath the top backticks. Here’s how it looks:
Step 4: Add the bottom: Finally, add three backticks underneath the code like you did for step 1. Here it is in full:
<div role="contentinfo"> <h2>Privacy Statement</h2> <!-- footer content --> </div>
Now, the backtick method is not the only way you can make your code snippets colorful. Let’s try another one.
Method #2: Use CodeSnap
If you’re looking for another way to make your code snippets colorful, I highly recommend using CodeSnap.
CodeSnap
📸 Take beautiful screenshots of your code in VS Code!
Features
- Quickly save screenshots of your code
- Copy screenshots to your clipboard
- Show line numbers
- Many other configuration options
Usage Instructions
- Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for
CodeSnap. - Select the code you'd like to screenshot.
- Adjust the width of the screenshot if desired.
- Click the shutter button to save the screenshot to your disk.
Tips:
- You can also start CodeSnap by selecting code, right clicking, and clicking CodeSnap
- If you'd like to bind CodeSnap to a hotkey, open up your keyboard shortcut settings and bind
codesnap.startto a custom keybinding. - If you'd like to copy to clipboard instead of saving, click the image and press the copy keyboard shortcut (defaults are Ctrl+C on Windows and Linux, Cmd+C on OS X), or bind
codesnap.shutterActiontocopyin your…
It’s an awesome Visual Studio Code extension that adds a colorful background to code snippets you pick. Here’s how to use it.
Step 1: Pick your code snippet: Go to the file in your project’s repository and highlight your chosen code snippet
Step 2: CodeSnapify it!
Right click your highlighted code snippet and click on where it says CodeSnap. On the right side of your screen, you'll see a screenshot of your code snippet on a colorful background.
Step 3: Save your screenshot
Go to the screenshot, right-click it, and pick Copy. Then, paste it to your Dev.to article.
Volia! You got a colorful code snippet!
Explore more
Congratulations, you just learned two ways to turn your code snippets from technical but stiff to technical yet colorful! 😊 🎉 Now if you’re looking for other ways to take your code snippets to the next level, check out @get_pieces' app Pieces By Developer. Your mind will be amazed! 😊 Speaking of being amazed, check out my other content on Dev.to by giving me a follow! 😊
Also, check out the links below if you want to connect with me outside of Dev.to
Top comments (27)
Why didn't I know about Codesnap 😶
I remember designing the whole thing in Adobe XD for pasting the workflow code.
There is one more thing possible on DEV, it's just that I can't find the article that used it. It was a while ago, similar to the effect of the highlighter.
Are you maybe referring to setting the language to
difffor a triple tick block, then adding a + or - to the beginning of the line to highlight which lines are added/removed?Was this question for me @terabytetiger? :)
Sorry for the confusion- no, it's for Anmol regarding this line:
Nope, didn't knew this at all.
I was refering to this type of hightlighting.
But thanks for telling the diff type, I wasn't aware of that :)
Oh, interesting - I don't think I've ever seen that in a post before!
According to this post you can do it with
<mark>tags:How to use Emojis and Highlighting text (dev.to) and should we use it ?
Sven Herrmann ・ Jan 15 '23
Thank you for sharing :)
I think the list of options should be there in devto editor guide as well.
I recently got to know to about this Carbon.now.sh but Codesnap seems more efficient. before this I used design the whole thing in figma or would prefer posting a screenshot.
Anyway, Nice article @cbid2 !!
Oh my HECK, I really wish I would've known about this sooner. I've always been posting screenshots of the code I want to share and then posting
But now I know I can just do
So incredibly cool! Thank you so much!
Awesome article! 🔥 And thanks for the mention ☺️
You can check out our official website at pieces.app/
While CodeSnap has cool features like backgrounds, I suggest using code blocks instead of images of code because it's easy to copy-paste.
Good point there @posandu! 😊
How to create link like this to navigate to other post
Also how to create link like these?
Most of my comments with the new articles here is about the syntax highlighting in code blocks, thanks for explaining it so well and also presenting the code snap extension, I didn’t know about 🫶
Learnt a new stuff today . Thanks Christine :))
Such a nice post !! Definitely hope it gets more traction because I have seen posts that would have benefited from it
Omg thank you so much for this!!🙏I will surely have a usage for this stuff in my future articles 👍 great article, Christine! 🙌
amazing, i am new to dev and markdown, your post just makes sense, i will do well to refer to them when writing my next article
Thank you @bennyfmo_237! :) I highly recommend reading this one too
How To Create a Table of Contents to your Dev.to article
Christine Belzie ・ Mar 6
Some comments may only be visible to logged-in visitors. Sign in to view all comments.