Code-Live is a great eaily used editor that supports both real-time coding and viewing for Front-End developers, which can be understood as simplified CodePen or JSFiddle.
- Open https://terry-su.github.io/CDN/CodeViewer
- Input codes
- Click "Use Link" button on the top right of editor, then select one way(copy url for example) to use.
HTML/CSS/JS + Static Server(Github Page) = Your own CodePen
- Website(like blog) to add code examples
- Be creative
Default mode(html, css or js) to show
Possible value: "html" , "css" or "js"
Example: mode=css
Default data url used to display its data.
Code-Live home page + ?defaultDataUrl= + Passing data url:
Data format:
function codeViewerCallback() {
return {
// Set html content
html: '',
// Set css content
css: '',
// Set javascript content
js: ''
}
}To rewrite default function name codeViewerCallback.
Example: defaultDataCallbackName=myCallback
While writing a blog or a website, sometimes we want to add an vivid example, even including related codes. So, Code-Live comes out. Unlike CodePen or JSFiddle, CodeViewer is a pure Front-End project(no dynamical server), you needn't to worry about transnational network restriction and you're able to custom display style freely.
If you found somewhere in codes to be improved or fixed, or just make a suggestion, don't hesitate to send a pull request.