viebel
KLIPSE handbook for interactive code snippets

Updated 2 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?

"}],"progress":{"chapters":[]}},"languages":[],"hasEbooksVersion":false,"config":{"version":"19.6.14","hasBlog":true,"isEnterprise":false,"apiHost":"https://api.gitbook.com","mainHost":"https://www.gitbook.com","stripePublicKey":"pk_live_iPkbPsG28bjTrkbfHXUq0cA0","gaToken":"UA-57505611-6","mixpanelToken":"aa7ba0807002f1cbd33391bdd14d5ad9","github":{"integrationUrl":"https://github.com/integrations/gitbook/installations/new"}},"req":{"date":"2017-05-25T03:09:25.373Z","csrfToken":"wQyxhEv3-LNdhRM4oDRYClnX3qGdfdcDtU4Q","query":{},"url":"/book/viebel/klipse-demo/details","duration":119}} }),document.getElementById("application"));})();