---
title: Prism Js not working on page loaded by turbo
url: https://calvin.my/posts/prism-js-not-working-on-page-loaded-by-turbo
published: 2024-06-23
updated: 2026-09-17
category: Development
tags:
- Rails
- Turbo
- Javascript
- Stimulus
summary: Prism JS syntax highlighting may fail on Turbo-rendered pages because its default initialization runs only during the initial DOM load. As a result, highlighted content can appear unformatted after Turbo navigation but work after a full refresh. The post recommends disabling Prism’s automatic highlighting and using a Stimulus controller to trigger highlighting whenever the relevant content container connects.
---

# Prism Js not working on page loaded by turbo

Prism Js performs the syntax highlighting on DOMContentLoaded, and this only happens once for applications rendered by Turbo.

Therefore something like this shows up when you navigate.

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/c5f7c898-8a4b-453f-8770-f7f40f059d5c.png)

When you perform a hard refresh, it works again.

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/3798d9d5-3fa1-4412-be33-5533ba8492d9.png)

To make Prism Js work as intended, we can first disable the auto-highlighting feature. This needs to be done before importing the prism library.

```javascript
window.Prism = window.Prism || {};
window.Prism.manual = true;
import 'prism'
```

Next, we create a stimulus controller to manually execute the highlighting.

```javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    connect() {
        Prism.highlightAll();
    }
}
```

Finally, attach this controller to the \<div\> that holds your contents.

```markup
<div class="article" data-controller="prism">
</div>
```