viebel
KLIPSE handbook for interactive code snippets

Updated 8 months ago

What is Klipse?

KLIPSE is a simple client-side code evaluator pluggable on any web page.

The klipse plugin is a javascript tag that transforms static code snippets of an html page into live and interactive snippets:

  • Live: The code is executed in your browser
  • Interactive: You can modify the code and it is evaluated as you type

The code evaluation is done in the browser: no server is involved at all!

KLIPSE supports several languages:

  • javascript
  • clojure[script]
  • scheme
  • ruby
  • python

Show your love to code interactivity by giving us stars on Github Klipse Repository.

It's super easy to insert interactive code snippets in a gitbook. All you need to do is to add klipse to the list of your plugins in book.json:

{
   "plugins": ["klipse"]
}

And to embed your code snippets in the tag corresponding to the language of your code:

  • eval-js for javascript
  • eval-clojure for clojurescript
  • eval-scheme for scheme
  • eval-ruby for ruby
  • eval-python for python

If you are on an html page and not in a git book, you need to include the klipse javascript tag:

<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">

<script>
    window.klipse_settings = {
        selector_eval_js: '.language-klipse-eval-js', // css selector for the html elements you want to klipsify
    };
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>

Look at the klipse README in github for more information.

Javascript code snippets

For javascript, this is how you make an interactive code snippet:

```eval-js
var x = 1;
x + Math.random();
```

And the result would be:

var x = 1;
x + Math.random();

Super easy. no?

In addition, there are plenty of fun ways to configure your javascript code snippets.

Clojure[script] code snippets

For clojure[script], this is how you make an interactive code snippet:

```eval-clojure
(let [x 1]
  (map inc [x 2 3]))
```

And the result would be:

(let [x 1]
  (map inc [x 2 3]))

What do you say about that? In addition, there are plenty of fun ways to configure your clojure[script] code snippets.

Scheme code snippets

For scheme, this is how you make an interactive code snippet:

```eval-scheme
(let ((x 23)
      (y 42))
 (+ x y))
```

And the result would be:

(let ((x 23)
      (y 42))
  (+ x y))

Fair enough. Right?

Ruby code snippets

For ruby, this is how you make an interactive code snippet:

```eval-ruby
[1, 2] * 10
```

And the result would be:

    [1, 2] * 10

How could we possibly make it simpler?

Python code snippets

For python, this is how you make an interactive code snippet:

```eval-python
def factorial(n):                                   
  if n == 0:                          
    return 1                              
  else:
    return n * factorial(n - 1)           

print(factorial(5))
```

And the result would be:

def factorial(n):                                   
  if n == 0:                          
    return 1                              
  else:
    return n * factorial(n - 1)           

print(factorial(5))

Nice. Right?

<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css"> <script> window.klipse_settings = { selector: ".language-klipse, .lang-eval-clojure", selector_eval_js: ".lang-eval-js", selector_eval_python_client: ".lang-eval-python", selector_eval_php: ".lang-eval-php", selector_eval_scheme: ".lang-eval-scheme", selector_eval_ruby: ".lang-eval-ruby", selector_reagent: ".lang-reagent", selector_google_charts: ".lang-google-chart", selector_es2017: ".lang-eval-es2017", selector_jsx: ".lang-eval-jsx", selector_transpile_jsx: ".lang-transpile-jsx", selector_render_jsx: ".lang-render-jsx", selector_react: ".lang-react", selector_eval_markdown: ".lang-render-markdown", selector_eval_lambdaway: ".lang-render-lambdaway", selector_eval_cpp: ".lang-eval-cpp", selector_eval_html: ".lang-render-html", selector_sql: ".lang-eval-sql", selector_brainfuck: "lang-eval-brainfuck", selector_js: ".lang-transpile-cljs" }; </script> <script src="https://storage.googleapis.com/app.klipse.tech/plugin/js/klipse_plugin.js"></script>