bsde1234/code-knack

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

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)

Demo

• Simple Demo
• Jeklly Demo
• My Blog (Hexo)
• 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>
<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
    languages: {                        // language config
      'javascript': {                   
        mode: 'browser',                      // use browser based implement
        scripts: ['./lib/codemirror/mode/javascript/javascript.js'],    // required script
      },
      'scheme': {
          mode: 'browser',
          scripts: ['./lib/codemirror/mode/scheme/scheme.js', './lib/engines/biwascheme-min.js'],  // load biwascheme to enable scheme implement
      },
      'css': {
          mode: 'view',                 // mode == 'view', can not run.
          scripts: ['./lib/codemirror/mode/css/css.js'],
      },
      ...
    }
 })
 codeKnack.init()

See Demo for more details.

For npm package

WIP

CodeKnack Options

Options	Defaults	Description
codeKnackPath	'/lib/code-knack/'	path to CodeKnack's resource
elements	will use the pre > code elements generated by marked package	an array contains elements with code
guessLang	will guess the language from pre > code elements generated by marked package	a function to guess language in each element
enabledLanguages	-	enabled language array
languages	-	see followed

CodeKnack Language Options

Options	Defaults	Description
mode	-	'view', 'browser' or 'proxy'
proxyUrl	-	required option when mode == 'proxy'. A url to handle code
scripts	-	required option when mode == 'browser'. Scripts to run, CodeKnack injects them into HTML

Support 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