@barhatsor/code.js

The engine behind the codeit app.

Usage no npm install needed!

<script type="module">
  import barhatsorCodeJs from 'https://cdn.skypack.dev/@barhatsor/code.js';
</script>

README

Codeit GitHub license npm version

Codedit is a javascript library for creating interactive code snippets. See it live.

  • Code with a single element: just add a <cd> tag in your HTML and it'll automagically turn into editable code, no Javascript needed.
  • Everything you'd expect from a code editor: Codedit autocompletes stuff like brackets and tabs. It also autodetects your code's language and highlights it accordingly.
  • Flexible and stylable: Want it dark? No problem. Just add background: black: You can easily change anything in Codedit. No pesky iframes, just pure HTML.

Get started

Simply add a <script> tag to the head of your HTML.

<script src="https://unpkg.com/codedit@1.0.7/codedit.min.js"></script>

That's it! Throw a codedit in your HTML and you're all set.

Examples

Express a point with code.

Result:

Which is why, for example, when you create a string like this:

let myString = 'This is my string.';

Code:

<p>Which is why, for example, when you create a string like this:</p>
<cd>let myString = 'This is my string.';</cd>

Add a codedit anywhere, even at the middle of a sentence.

Result:

Some useful methods are split(), indexOf() and replace().

Code:

<p>Some useful methods are <cd>split()</cd>, <cd>indexOf()</cd> and <cd>replace()</cd>.</p>

Make a codedit uneditable with editable="false"

<cd editable="false">
  string a = 'You can't edit this';
</cd>

See live examples on the website.

License

Codedit is MIT licensed.