DEV Community 👩‍💻👨‍💻

Cover image for Dev.to code syntax highlighter
Jimmy Hung
Jimmy Hung

Posted on • Updated on

Dev.to code syntax highlighter

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
kishorjena profile image
Kishor Jena • Edited on

Can you tell the color theme name for javascript syntax highlighter

🌚 Life is too short to browse without dark mode