( Little Bar at ChengDu, China )

CodePen and JSFiddle are both convenient online codes editors for front-end developers. And you can demonstrate your code examples vividly in your blog or website by inserting an online editor example, which displays codes and the final result.

However, how an editor's style can stay the same with the style of your blog or website is a problem, and you have to rely on them deeply. Because of these limits, I'm wondering if we can write our own code viewer using totally front-end technologies without any dynamic server, and the answer is amazing "YES".

Showcase

How it works

There're 3 HTML layers:

 __________
/_________/ User HTML

 __________
/_________/ CodeViewer HTML

 __________
/_________/ Basic HTML

• Basic HTML: most basic HTML that receives the data, HTML/CSS/JS strings, for rendering standalone web page from parent HTML.

• CodeViewer HTML: building the user interfaces to update basic HTML, and receiving settings from parent HTML.

• User HTML: yeah, it applies some settings, such as default data or default display mode, on CodeViewer HTML.

How it's built

Based on concepts above, you can already build a simplified CodeViewer HTML, and the source codes are so simple that it doesn't even need Webpack at all.

However, to organize the interaction logic of CodeViewer better, using React and Redux is a good idea. CodeViewer is now using Typescript + React + Dva(a light framework including redux) as development environment.

And CodeViewer is deployed simply on a commonly used static server: Github(Github Pages).

Where and how to use it

In fact, you can use it anywhere only if there supports iframe. Specifically, github.io Github pages support iframe, like the official website of a canvas library I wrote before.

To bind content with editor, you add content url as a parameter immediately after the CodeViewer url: "Codeviewer url + ?defaultDataUrl= + Content url"

Then, just insert <iframe src="your-code-viewer-url"></iframe> into your blog or website page.

Similarly, you can also configure default display mode. For more detail, visit Codeviewer's source codes page.