# Syntax highlight any block on a Web Page

> Learn how to syntax highlight any element on a web page with highlight.js and hljs.highlightElement, even when your code is not inside a code tag.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2022-05-27 | Topics: [Tools](https://flaviocopes.com/tags/tools/) | Canonical: https://flaviocopes.com/syntax-highlight-any-block-web-page/

I had the need to add syntax highlighting to a page, but I didn't have the luxury of changing the markup.

Most syntax highlighting libraries, like Prism.js, force you to use a fixed structure like this:

```html
<pre>
  <code class="language-js">
    ...
  </code>
</pre>
```

Citing this:

> Prism does its best to encourage good authoring practices. Therefore, it only works with <code> elements, since marking up code without a <code> element is semantically invalid. 

It's all nice and idealistic and all but I had my code in a `div` from an outside source. You force me that markup, but I don't have that.

I finally found https://highlightjs.org/ that lets me apply syntax highlighting to any element I want on the page, by loading the library first and then calling:

```js
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.my-code-div').forEach((el) => {
    hljs.highlightElement(el)
  })
})
```