Skip to content


Repository files navigation


A code evaluator on your web page. Support both client implements and server implements.

  • Mobile compatibility
  • Allow running code at client side or server (implement yourself)
  • Inject required script files automatically
  • Good design and theme support
  • Syntax highlight editor (powered by CodeMirror)
  • Multi-languages support (powered by different projects, see table followed)


  • Java support
  • Diagram output
  • LaTeX output
  • Python 3 support
  • script state/network state detection
  • Chart


screen record

Basic Demo:


How to use

For browser

  1. use the production version in /dist
<script src="./code-knack.min.js" type="application/javascript"></script>
  1. CodeKnack uses CodeMirror as the editor, so you need to link CodeMirror's script and css files
<link rel="stylesheet", href="./lib/codemirror/codemirror.css"></link>
<link rel="stylesheet", href="./lib/codemirror/theme/monokai.css"></link>
<link rel="stylesheet", href="./lib/codemirror/theme/base16-light.css"></link>
<script src="./lib/codemirror/codemirror.js" type="application/javascript"></script>
  1. Configure CodeKnack and init.

if you use the default output of marked, you don't need to specify elements and guessLang. Or you need to find all elements contain code(usually in pre > code) and implement guessLang(a function uses an element as argument and return language name in lowercase)

 var codeKnack = new CodeKnack({
    codeKnackPath: './lib/code-knack',  // the resource path of code-knack
    elements: elements,                 // an array contains elements with code
    guessLang: guessLang,               // a function to guess language in each element
    enabledLanguages: langs,            // enabled language array
    theme: 'dark',                      // dark theme
    lineNumbers: true,                  // enabled line numbers
    languages: {                        // language config, if you want to add language support manually

See Demo for more details.

For npm package


CodeKnack Options

Options Required? Defaults Description
codeKnackPath Yes '/lib/code-knack/' path to CodeKnack
enabledLanguages Yes [] enabled languages array
elements Optional all elements pre > code an array contains DOM elements
guessLang Optional elements with class="language-{name and options}" a function to guess language for each element
keepSession Optional false if true, all codeblocks in same page will be considered in one session
theme Optional 'dark' dark or light theme
lineNumbers Optional true toggle line number
languages Optional - see followed

CodeKnack Language Config

By default, Code-Knack has built-in language configs (here).

Specified the languages field if you want to add new language support, or want to overwrite the existed config

  languages: {
      "mode": "...",              // 'view', 'browser' or 'proxy'
      "output": "...",            // 'text' or 'html'
      "proxyUrl": "...",          // required when mode == 'proxy'. A url to run code 
      "scripts": {      
        "syntax": ["..."],        // url of codemirror language mode files
        "engine": ["..."]         // required when mode == 'browser', url of code-knack browser engine files

Executable Languages

Language Implement
javascript -
python 2.7 Skulpt
ruby Opal
scheme Biwascheme
swift iSwift


install dependences.

$ npm install

build dev version

$ npm run dev

build production version

$ npm run prod


A code evaluator on your web page. Support both client implements and server implements.







No releases published


No packages published