A code evaluator on your web page. Support both client implements and server implements.
Branch: master
Clone or download
Latest commit 4b522a7 Feb 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets 修复一些小问题 Jan 28, 2019
build fix build issue Feb 2, 2019
dist fix javascript MIME issue Feb 15, 2019
docs fix javascript MIME issue Feb 15, 2019
src fix javascript MIME issue Feb 15, 2019
.babelrc first commit Jan 28, 2019
.eslintrc first commit Jan 28, 2019
.gitignore first commit Jan 28, 2019
LICENSE Create LICENSE Feb 13, 2019
README.md Update README.md Feb 13, 2019
package-lock.json update package info Jan 28, 2019
package.json fix build issue Feb 2, 2019
webpack.config.js first commit Jan 28, 2019

README.md

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

screen record

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