wc-code
wc-code copied to clipboard
Published
20 hours ago •
vanillawc
vanillawc
run code in the browser, https://vanillawc.github.io/wc-code/
<wc-code> run code in the browser
Usage
Import from CDN
<script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/[email protected]/src/wc-code.js"></script>
Usage NOTE
wc-code requires the use of <!DOCTYPE html> don't ask me why, ask the forgotten html God of proscii
Usage
Attributes
-
src- load an external source file -
style- CSS styling (defaultheight:100%;width:100%;) -
mode- the language you want to use -
theme- the codemirror theme you want to use -
file-name- this will be the file name used when the file is downloaded -
viewport-margin1 - sets theviewportMarginoption of the CodeMirrror editor instance (default10) -
readonly- sets the codemirror's "readOnly" configuration attribute to true, you may setreadonly="nocursor"if you want to disable the cursor and not let the user select the text inside
1Setting viewport-margin to infinity will auto-resize the editor to its contents. To see this in action, check out the CodeMirror Auto-Resize Demo.
Basic Usage
all language modes/themes are dynamically loaded, and the css is dynamically loaded, you don't need to add any additional files for them
JavaScript example
<!DOCTYPE html>
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/[email protected]/src/wc-code.js"></script>
</head>
<body>
<wc-code mode="javascript">
<script type="wc-content">
const resp = await fetch("https://sv443.net/jokeapi/v2/joke/Any?blacklistFlags=nsfw,racist,sexist&format=txt");
const text = await resp.text();
console.log(text);
</script>
</wc-code>
</body>
Python Example
<!DOCTYPE html>
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/[email protected]/src/wc-code.js"></script>
</head>
<body>
<wc-code mode="python">
<script type="wc-content">
a = 1
b = 1
print(a+b)
</script>
</wc-code>
</body>
Theme Example
<!DOCTYPE html>
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/[email protected]/src/wc-code.js"></script>
</head>
<body>
<wc-code mode="python" theme="monokai">
<script type="wc-content">
a = 1
b = 1
print(a+b)
</script>
</wc-code>
</body>
Example in pug !
JavaScript example
doctype html
html(lang="en")
script(type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/[email protected]/src/wc-code.js")
body
wc-code(mode="javascript" theme="monokai")
script(type="wc-content").
const resp = await fetch("https://sv443.net/jokeapi/v2/joke/Any?blacklistFlags=nsfw,racist,sexist&format=txt");
const text = await resp.text();
console.log(text);
see https://codemirror.net/theme/ for a list of supported themes
Contributing
See CONTRIBUTING.md
vanillawc