3.0.6 • Published 1 month ago
light-pen v3.0.6
Light(weight) Code(pen)
Demo
https://konnorrogers.github.io/light-pen
Purpose
A small lightweight editor using <pre><code></code></pre>
and a <textarea>
Inspired by Chris Ferdinandi
Install
npm install light-pen
Getting started
// Auto-register <light-pen>
import "light-pen"
// Registry yourself
import LightPen "light-pen/exports/light-pen.js"
LightPen.define() // Registers `<light-pen>`
// Register under another name
import LightPen "light-pen/exports/light-pen.js"
LightPen.define("other-name")
Usage
<light-pen></light-pen>
That's it!
Slotting in HTML / CSS / JS
<light-pen>
<script type="text/plain" slot="html">
<div style="color: red;">
<div>Hi there friends</div>
</div>
<p>
Sup dude
</p>
</script>
<script type="text/plain" slot="css">
p {
color: green;
}
</script>
<script type="text/plain" slot="js">
console.log("Hi")
</script>
</light-pen>
Changing the title
<light-pen>
<div slot="title">My Awesome Editor</div>
</light-pen>
Opening languages by default
<light-pen>
Takes a string of comma separated languages to open on initial render.
<light-pen open-languages="html,css,js">
</light-pen>
More to come for more docs coming on how to change things!
Roadmap
- Implement an extendable
LightPenBase
which includes a pluggable syntax highlighter and theme.
- Implement an extendable
- Implement
<textarea>
rendering hooks to add CodeMirror for more robuste setups.
- Implement
- Add vertical resizing of
<textarea>
- Add vertical resizing of
- More documentation around customization.
- Add a console logger
7b592c8f5f05ed82d439d7950450eec06dc3ab66
- Add a console logger
3.0.6
1 month ago
3.0.5
1 month ago
3.0.4
1 month ago
3.0.3
2 months ago
3.0.2
2 months ago
3.0.1
3 months ago
3.0.0
3 months ago
2.3.0
3 months ago
2.3.1
3 months ago
2.2.0
5 months ago
2.1.0
6 months ago
2.0.0
6 months ago
1.2.0
6 months ago
1.1.1
7 months ago
1.1.3
7 months ago
1.1.2
7 months ago
1.0.2
8 months ago
1.0.1
8 months ago
1.0.0
8 months ago