Code-Knack

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)

TODO

• [x] Java support
• [x] Diagram output
• [x] LaTeX output
• [X] Python 3 support
• [ ] script state/network state detection
• [ ] Chart

Demo

Basic Demo:

• Simple Demo

Integration:

• Jekyll Demo
• GitPress.io

How to use

For browser

1. use the production version in /dist

<script src="./code-knack.min.js" type="application/javascript"></script>

2. 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>

3. 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
      ...
    }
 })
 codeKnack.init()

See Demo for more details.

For npm package

WIP

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: {
    "YOUR_LANGUAGE_NAME": {
      "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 | | --- | --- | | C/CPP | JSCPP | | javascript | - | | python 2.7 | Skulpt | | ruby | Opal | | scheme | Biwascheme | | swift | iSwift |

Developement

install dependences.

$ npm install

build dev version

$ npm run dev

build production version

$ npm run prod