Skip to content

vanillawc/wc-code

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

<wc-code> run code in the browser

GitHub Releases Latest Status Release Status Discord Published on WebComponents.org

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 (default height: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 the viewportMargin option of the CodeMirrror editor instance (default 10)
  • readonly - sets the codemirror's "readOnly" configuration attribute to true, you may set readonly="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