⟵ Back

PraceJS

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.

Usage

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() {
    praceInit("pre");
}
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">
...
</pre>

Demo

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

License

AGPL-v3.0


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