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
forjavascript
eval-clojure
forclojurescript
eval-scheme
forscheme
eval-ruby
forruby
eval-python
forpython
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?