This is a part of the series: LocalPen - code pens that run locally!
In this post we describe the different methods to prefill LocalPen with code (import code to the editors). This can be great for documentation and sharing links with code.
Most commonly, code is imported from a URL. You can provide the source URL in the UI (settings button > Import), or by adding the URL as a hash to the LocalPen url:
LocalPen can detect and automatically load code from multiple sources. Currently the supported sources are:
- Github gists (imports multiple files in the gist)
- A directory in a github repo (multiple files)
- A file in a github repo (imports that single file)
- Gitlab snippets (imports multiple files in the snippet)
- A directory in a gitlab repo (multiple files)
- A file in a gitlab repo (imports that single file)
- Extract code blocks from a webpage (see code blocks)
- Otherwise the URL will be considered a raw file (like raw files on github)
If the source URL points to multiple files (e.g github gists and directories), LocalPen tries to guess which file to load in which code editor, for example:
- index.html -> markup
- my-style.css -> style
- app.js -> script
All supported languages can be used. If the source URL points to multiple files of the same category, guessing may not work well. In this case, you may need to provide the files to load and the language for each as querystring parameters. For example:
LocalPen will look for the directory
mydir in the github repo
myuser/myrepo, and load
page.pug in the markup editor,
styles.scss in the styles editor, and
app.ts in the script editor. The first file in the query string will be shown by default (
page.pug in this case).
Instead of manually copy/pasting URLs to import, the bookmarklet can be very convenient. It opens LocalPen in a new window and adds the current webpage URL as a hash. Create a new bookmark in your browser and add this code as its URL:
Currently, CodePen API does not allow directly importing code from pens. However, you can export any saved pen as a Github gist and then import it to LocalPen. This is even easier if you use the bookmarklet. The format that Codepen exports to gists is well understood by LocalPen. Most pens can be imported with no or minimal changes.
This is a summary overview of moving code between LocalPen, CodePen and GitHub gists:
Remember, you can always export your code from LocalPen as raw source code files, compiled/transpiled code as an HTML file or as project configuration JSON.
Editors can be prefilled by code blocks in web pages. The page is fetched, its HTML is parsed and code is extracted from elements with specific CSS selectors.
Important Note: For this to work, CORS has to be enabled on the target host to allow fetch requests from LocalPen. This is not required if LocalPen is hosted on the same host of the target web page.
Add the querystring parameter
url with no value, and put the URL of the page with the code blocks as a hash. For example:
By default, LocalPen looks for elements that match the CSS selector
for example, in this code block:
<code class="localpen"> <pre data-lang="html"> This is identified as <strong>HTML</strong> code </pre > </code>
The HTML editor is prefilled with:
This is identified as <strong>HTML</strong> code
Notice that the code should be encoded (e.g. angled brackets) to avoid interference with the HTML of the page.
You may wish to specify CSS selectors for elements that contain the code for specific languages. The following example loads the content of the first element that matches the CSS selector
h3 as the HTML code:
Please note that you may prefill LocalPen editors embedded in the same page. This works great for documentation websites.
You can prefill the editors by writing content as querystring parameter values, e.g.:
That was a long post, but it describes such a powerful feature in LocalPen.
In the next post we discuss embedded editors and display modes.