DEV Community

loading...
Cover image for Dev.to code syntax highlighter

Dev.to code syntax highlighter

Jimmy
Code, design, think.
Updated on ・2 min read

What makes Dev.to stands out compared to other blog platforms such as Medium is that it is open source, and developer friendly - you can have the experience of writing a blog with code snippet examples as smooth as if you are writing code on an actual code editor.

The way to achieve writing code-like snipped in Dev.to is using the built-in code syntax highlighter. Here are some syntax highlighter examples and gotchas, and features I hope Dev.to provides in the future.

To write a simple block of code, open and enclose your code with 3 back-ticks.

note: I used "pre" tag to escape from triple back tick syntax on this editor



```

let foo = helloWorld;

```


Here's the actual view of the code block.

let foo = helloWorld;

The default syntax highlight is all white, you can change the highlight based on your language, here I use javascript syntax highlighter.



```javascript
let foo = helloWorld;

```


Here's the actual view of code block using javascript syntax highlighter

let foo = helloWorld;

Here's an example of java syntax highlighter vs javascript syntax highlighter to render React code. I noticed React code renders better with java syntax highlighter.

This is using java syntax highlighter

import React from 'react';
import { render } from 'react-dom';
import App from './components/App.jsx'


const rootElement = document.getElementById('root');
console.log(`【 made with  】`);

render(<App/>, rootElement);

This is using javascript syntax highlighter

import React from 'react';
import { render } from 'react-dom';
import App from './components/App.jsx'


const rootElement = document.getElementById('root');

console.log(`【 made with ❤ 】`);
render(<App/>, rootElement);

Here's the list of features I hope dev.to editor have in the future:

  • It has the ctrl+shift+F shortcut for auto formatting like in VS code.

  • Import your own custom syntax highlighter (the default colors are not too appealing)

  • When using pre tag to show code block there're redundant white spaces above and below the back-ticks

Discussion (0)