DEV Community

Cover image for Embedding code in posts

Embedding code in posts

Ben Sinclair on May 31, 2019

As I read articles on here, and on other sites like Medium, I sometimes see people post pictures of their work. Services like Carbon let you paste...
Read full post
Collapse
 
cicirello profile image
Vincent A. Cicirello •

Hi Ben. I found your post through a link in a comment of a recent post. Very nice writeup. There is a way to actually show backticks in a code block without using a different symbol as a stand-in.

If you want to show the backticks in a code snippet, you can put 3 tildas ~~~ on the line before the opening backticks and then again on a line after the closing backticks. Here is an example.

```Markdown
## Example markdown block
Blah, blah, blah...
```
Enter fullscreen mode Exit fullscreen mode

I don't know if this works in all flavors of Markdown, but it does here on DEV.

Collapse
 
niza profile image
Ebenezer Enietan (Niza) •

This is really Good

Collapse
 
itsasine profile image
ItsASine (Kayla) •

  • When replying to a post you can copy in relevant sections of the original code without having to open two browsers side-by-side and do it all by hand.

  • You can paste that code into your own editor and try it out.

🙌

 
moopet profile image
Ben Sinclair •

When I draft things they look fine in preview. Well, not 100%, previewing liquid tags in comments is a little shaky. But posts look ok to me in draft.

Is it possible that in drafts there are different classes on the page and you have a browser extension that's blocking something?

Collapse
 
moopet profile image
Ben Sinclair •

I'll do triple backticks here:

const testString="Let's see what happens here";

Does that look right for you? Can you try the same in a reply?

Collapse
 
grantdotdev profile image
Grant Riordan • • Edited

I could counter argue this with three points:

  1. As someone who writes on both DevTo and for FreeCodeCamp. What I tend to do is do both. I place an image of the code with styling and formatting, so people can see the code as they would on an IDE / Code Editor. Followed by the code in a code snippet for accessibility (best of both worlds)

  2. By using a snapshot of the code , it also offers the reader the opportunity to write it out by hand. In my opinion this is not a bad thing when teaching someone something. The task of writing something out by hand, (not just copy and pasting) can help readers to learn the concepts, familiarise themselves with the syntax and actually understand the code. More times than not, an article is being written to promote learning sharing knowledge, on the cases where it's to solve a problem / fix a bug. Then this is where I'd agree with you, just utiliae code snippet markdown.

  3. It's also worth remembering code snap tools aren't just for writing articles. They can also be useful for just sharing code problems with team members via Slack, Jira and other forms. It's much nicer receiving a styled code snippet on Slack, than they're default code snippet markdown.

Collapse
 
moopet profile image
Ben Sinclair •

I see your points, but counter-counter with these:

  1. Seeing the same thing twice in an article is just plain weird. It'd look like a mistake, especially since the platform will apply its own syntax highlighting, etc., which will look different.

  2. While I guess I get the motivation, you're explicitly deciding to exclude people with accessibility needs in order to force people not to copy the code.

Collapse
 
tarialfaro profile image
Tari R. Alfaro •

Another issue: poor internet connections and images don't mix very well. Being in the 25kb+ just for 400 bytes of code is crazy.

Collapse
 
silviaespanagil profile image
Silvia España Gil •

Thank you very much I did not know the triple ticks + language to add some colours and I loved it because it really makes the difference