⟵ Back


A piece of Javascript code thst you can add to any webpage that transforms all the <pre> elements in that webpage to a mini Ace editor.


Start by downloading prace.js and adding it and the Ace editor to your project:

<script src="path/to/the/ace/editor.js" async></script>
<script src="path/to/the/script/prace.js" async></script>

Then, initialize PraceJS on document load with the Javascript code:

function init() {
window.onload = init;

...where the first argument of the praceInit() function is the element to transform. I personally recommend the pre element, because if something goes wrong or Javascript is disabled, the pre element will still render as a code block.

Then, you can define your pre elements:

<pre lang="html" theme="tomorrow">


The demo is on this page. Notice how all code blocks became Ace editors.



Kiëd Llaentenn © 2019-2022 — CC BY-NC-ND 4.0