Plunker provides a minimal version of the editor for content creators to include on their websites.
We designed the embed to offer a minimal interface and set of features that is suitable for embedding in another website. The embed provides the following editing features:
- Full syntax-highlighting for a broad range of languages
- Real-time preview
- Arbitrary number of files including both text and binary assets
Adding the embed to your website
The embed is designed to run inside an
iframe element. The embed service itself runs at https://embed.plnkr.co.
The embed supports different sources of content:
Additionally, the initial appearance of the embed can be customized using query parameters:
show: Determines the list of initial panes to be shown.
The list is a comma-separated listing of filenames, fuzzy filenames or the string
Give a project with the files
lib/style.css, you could indicate
?show=index.html,js,previewto show the panes for
lib/script.jsand the Preview. Note that
index.htmlis an exact match whereas
jswill be fuzzy matched against all files in the Project and the best match will be shown.
If not specified,
preview: Determines the default file to be rendered in the preview.
Normally, Plunker will use a heuristic to guess what the index file should be for a given plunk. However, you can indicate the specific path that you would like the Plunker Preview to use using the
For example, given a project with the files
README.md, if you wanted to show a real-time markdown editing experience you could do:
?show=README.md,preview&preview=README.html. Note that the
README.htmlwhereas a file called
README.mdexists. This is on purpose so that the Plunker run server can transpile the
README.htmlto show a rendered version in the preview.
sidebar: Determines the initial sidebar pane to be shown.
When set, the
sidebarquery parameter will determine the sidebar pane that is shown on load. This parameter accepts the values
configfor the file tree and configuration pane, respectively.
sidebaris not specified, the embed will automatically show the sidebar when the width of the embed is greater than or equal to
992px(unless configured otherwise, as per
autoCloseSidebarbelow). If the embed width is less than
992px, the sidebar will automatically close after a file is selected.
autoCloseSidebar: Determines if the embed will automatically close the sidebar.
This query parameter allows you to override the default, width-based behaviour. Normally, an embed whose width is less than
992pxwill automatically close the sidebar after it has been used. This query parameter provides the opportunity to override that behaviour.
?sidebar=tree&autoCloseSidebar=falseto force the file tree sidebar pane to show and to remain open even once a file operation has been performed.
deferRun: Prevents preview panes from automatically running.
When specified, the preview panes will not automatically run on load. Instead, a large button will be shown that, when clicked, will start the preview.
This feature is particularly useful for two scenarios:
- Your embedded examples are processor-heavy.
- You display many embedded examples on the same page.
?deferRunto prevent previews from automatically running.
We suggest using
frameborder="0" as an attribute of the
iframe element for a better appearance.
<iframe src="https://embed.plnkr.co/plunk/W8S4hea9h66z6iCX43vy?show=app,preview" frameborder="0" width="100%" height="480px" ></iframe>
<iframe src="https://embed.plnkr.co/plunk/W8S4hea9h66z6iCX43vy?show=app,preview&deferRun" frameborder="0" width="100%" height="480px" ></iframe>