This is a part of the series: LocalPen - code pens that run locally!
The code editor can be embedded in web pages using iframes. They can still be fully functional and editable unless, for example mode is set to
codeblock (more about that later). Notice they can also prefilled with code, the same way described in a previous post.
<iframe src="https://localpen.io/"></iframe> <iframe src="https://localpen.io/#https://gist.github.com/hatemhosny/a0a32216df59e53879b7cd83856cdde4" ></iframe> <iframe src="https://localpen.io/?mode=codeblock&js=script.jsx#https://gist.github.com/hatemhosny/a0a32216df59e53879b7cd83856cdde4" ></iframe>
A page with embedded editor may look like this:
The querystring parameter
mode can be used to select different display modes.
The following display modes are supported:
full: This is the default mode with a top toolbar, editor and results panes.
editor: Hides the results pane and works as editor only.
codeblock: A read-only mode just showing only the code block. On mouse-over a copy button appears that allows to copy the code. This is useful when embedded for code documentation.
In the next post, we show how to add intellisense for your custom ES modules