Table of Contents
Flashback
Method #1: Using backticks
Method #2: Use CodeSnap
Explore more
Flashback
When I was in co...
For further actions, you may consider blocking this person and/or reporting abuse
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
Awesome!
I usually use Carbon to create and beautiful images of your source code.
Everyone can try
Method #1 is just simple markdown syntax and not specific to dev.to 😎
markdownguide.org/extended-syntax/
Thanks for the guide @karsten_biedermann. 😊
I just wanted a more detailed explanation of method 1, especially for people unfamiliar with Markdown. Also, based on the responses, a lot of people seemed to have not known that they could use this technique to make their code snippets colorful, so sometimes the simplest thing is not always obvious. 😉
It's great that you were able to bring some light into the darkness for many people 😊.
Absolutely! :)
I'm still unable to get this. Can someone help me out. I am getting in black background with white text only. If I use codesnap I'm getting image instead of code.
Carbon.now.sh
❤️