Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

screen record

Basic Demo:

Integration:

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
      ...
    }
 })
 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

About

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

Resources

License

Releases

No releases published

Packages

No packages published