Dev.to and GitHub usage pl Syntax Highlighter

Prettylights Syntax Highlighting

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

Sample.function({param})

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

on the 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 :-

---

Or Use API

    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.

<link rel="stylesheet" href="https://dev.to/assets/crayons-132fd5353a6887f948f908fecf2c183d4019983fae2c184971fb9deb4e930bfb.css" />

or Use the 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