Dev.to and GitHub usage pl Syntax Highlighter
Published: 2024-03-17 08:38:06


Prettylights Syntax Highlighting

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukqkvupsmbjrtklxcrgq.png)

Notice the pl - Use inspection tool on Code Blocks on Dev.to


About GitHub
Source - https://github.com/highlightjs/highlight.js/issues/1224


Try Here
```js
Sample.function({param})
```


Try Using This CDN :- https://dev.to/assets/crayons-132fd5353a6887f948f908fecf2c183d4019983fae2c184971fb9deb4e930bfb.css

on the HTML
```html
<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">pre</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs language-js<span class="pl-pds">"</span></span>&gt;&lt;<span class="pl-ent">code</span>&gt;&lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-keyword<span class="pl-pds">"</span></span>&gt;var&lt;/<span class="pl-ent">span</span>&gt; foo = &lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-function<span class="pl-pds">"</span></span>&gt;&lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-keyword<span class="pl-pds">"</span></span>&gt;function&lt;/<span class="pl-ent">span</span>&gt; (&lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-params<span class="pl-pds">"</span></span>&gt;bar&lt;/<span class="pl-ent">span</span>&gt;) &lt;/<span class="pl-ent">span</span>&gt;{
  &lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-keyword<span class="pl-pds">"</span></span>&gt;return&lt;/<span class="pl-ent">span</span>&gt; bar++;
};

&lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-built_in<span class="pl-pds">"</span></span>&gt;console&lt;/<span class="pl-ent">span</span>&gt;.log(foo(&lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-number<span class="pl-pds">"</span></span>&gt;5&lt;/<span class="pl-ent">span</span>&gt;));
&lt;/<span class="pl-ent">code</span>&gt;&lt;/<span class="pl-ent">pre</span>&gt;</pre></div>
```
 
See on Codepen :- 

{% codepen https://codepen.io/SH20RAJ/pen/JjVbLEL %}


---

Or Use API 
```js
    const api = `https://dev.to/api/articles/sh20raj/devto-and-github-usage-pl-syntax-highlighter-3mo8`;
    const res = await fetch(api);
    const data = await res.json();
    let html= await data.body_html;
```

and Use This CSS CDN then all the codes will be highlighted.
```html
<link rel="stylesheet" href="https://dev.to/assets/crayons-132fd5353a6887f948f908fecf2c183d4019983fae2c184971fb9deb4e930bfb.css" />
```

or Use the CSS
```css
/* Code Highlighting Added */
.highlight__panel.js-actions-panel {
	display: none;
}
code {
	color: azure;
  background: black;
  padding: 2px;
}
.highlight.js-code-highlight {
	border-left: 2px solid aqua;
	overflow: auto;
	color: azure;
	background: black;
	padding: 10px;
}
.pl-kos,.k,.nx{color:pink}
.pl-ent,.p,.na{color:hotpink}
.pl-s,.s,.s1{color:aqua}
.pl-c1,.o,.nc{color:white}
.pl-c,.c{color:green}
.dl,.nf,.nt{color:yellow}

```


https://gist.github.com/SH20RAJ/e0e3d9bd5c5c4534b3b1c0713e66a5ce