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

• Java support
• Diagram output
• LaTeX output
• 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