{"id":13394044,"url":"https://github.com/viebel/klipse","last_synced_at":"2025-05-14T05:06:27.729Z","repository":{"id":44731650,"uuid":"46494844","full_name":"viebel/klipse","owner":"viebel","description":"Klipse is a JavaScript plugin for embedding interactive code snippets in tech blogs.","archived":false,"fork":false,"pushed_at":"2024-10-01T08:57:24.000Z","size":95959,"stargazers_count":3127,"open_issues_count":84,"forks_count":148,"subscribers_count":53,"default_branch":"master","last_synced_at":"2025-05-05T23:37:29.428Z","etag":null,"topics":["brainfuck","clojure","clojurescript","code-evaluation","codemirror-editor","common-lisp","evaluation","interactive-snippets","javascript","klipse-plugin","lua","ocaml","prolog","python","react","reactjs","reasonml","ruby","scheme"],"latest_commit_sha":null,"homepage":"http://blog.klipse.tech/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/viebel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"klipse","github":"viebel"}},"created_at":"2015-11-19T13:45:39.000Z","updated_at":"2025-04-16T11:51:54.000Z","dependencies_parsed_at":"2024-10-24T10:53:44.232Z","dependency_job_id":null,"html_url":"https://github.com/viebel/klipse","commit_stats":{"total_commits":918,"total_committers":33,"mean_commits":"27.818181818181817","dds":0.05882352941176472,"last_synced_commit":"3a660862e5f629d3047d22f2708b5d6bbe41a407"},"previous_names":[],"tags_count":69,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viebel%2Fklipse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viebel%2Fklipse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viebel%2Fklipse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viebel%2Fklipse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/viebel","download_url":"https://codeload.github.com/viebel/klipse/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254076637,"owners_count":22010611,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["brainfuck","clojure","clojurescript","code-evaluation","codemirror-editor","common-lisp","evaluation","interactive-snippets","javascript","klipse-plugin","lua","ocaml","prolog","python","react","reactjs","reasonml","ruby","scheme"],"created_at":"2024-07-30T17:01:07.003Z","updated_at":"2025-05-14T05:06:22.941Z","avatar_url":"https://github.com/viebel.png","language":"HTML","funding_links":["https://patreon.com/klipse","https://github.com/sponsors/viebel","https://www.patreon.com/bePatron?u=18227864"],"categories":["HTML","Clojure","clojure","Applications","Literate Programming"],"sub_categories":["Blogging"],"readme":"# Klipse\n\nKlipse is a JavaScript plugin for embedding interactive code snippets in tech blogs. See examples at https://blog.klipse.tech/\n\nTechnically, Klipse is a small piece of JavaScript code that evaluates code snippets in the browser and it is pluggable on any web page.\n\nIf you like this stuff, please consider a (small donation) on [Patreon](https://www.patreon.com/bePatron?u=18227864).\n\n\n## Plugin\n\nThe klipse plugin is a `JavaScript` tag (see details [below](https://github.com/viebel/klipse#integration)) that transforms static code snippets of an html page into live and interactive snippets:\n\n1. **Live**: The code is executed in your browser\n2. **Interactive**: You can modify the code and it is evaluated as you type\n\nThe code evaluation is done in the browser: no server is involved at all!\n\n\n# Live demo\n\nWith the klipse plugin, the code is evaluated as you type...\n\nHere is a [live demo](https://book.klipse.tech/) of the embedding of klipse in a web page.\n\n\n|JavaScript | Ruby |\n|-------------------------|-------------------------|\n|![abc](https://raw.githubusercontent.com/viebel/klipse/master/images/javascript-snippet.gif) |  ![abc](https://raw.githubusercontent.com/viebel/klipse/master/images/ruby-snippet.gif)|\n\n|PHP | Clojure |\n|-------------------------|-------------------------|\n|![abc](https://raw.githubusercontent.com/viebel/klipse/master/images/php-snippet.gif) |  ![abc](https://raw.githubusercontent.com/viebel/klipse/master/images/clojure-snippet.gif?cachebuster1)|\n\n\n# Supported languages\n\n- JavaScript: evaluation is done with the JavaScript function `eval` and pretty printing of the result is done with [pretty-format](https://github.com/thejameskyle/pretty-format)\n- Clojure[Script]: evaluation is done with [Self-Hosted Clojurescript](http://swannodette.github.io/2015/07/29/clojurescript-17)\n- Ruby: evaluation is done with [Opal](http://opalrb.com/)\n- C++: evaluation is done with [JSCPP](https://github.com/felixhao28/JSCPP)\n- Python: evaluation is done with [Skulpt](https://skulpt.org/)\n- Python3: evaluation is done with [Pyodide](https://github.com/pyodide/pyodide)\n- Scheme: evaluation is done with [BiwasScheme](http://www.biwascheme.org/)\n- Prolog: evaluation is done with [Tau Prolog](http://tau-prolog.org/)\n- Common Lisp: evaluation is done with [JSCL](https://github.com/jscl-project/jscl)\n- PHP: evaluation is done with [Uniter](https://asmblah.github.io/uniter/)\n- SQL: evaluation is done with [sql.js](https://github.com/kripken/sql.js). See [SQL example](https://blog.klipse.tech/javascript/2016/11/07/best-sql-tutorial.html)\n- Lua: evaluation is done with [wasm_lua](https://github.com/vvanders/wasm_lua)\n- Go: evaluation is done with [Yaegi](https://github.com/traefik/yaegi)\n- BrainFuck\n- JSX\n- EcmaScript2017\n- Google Charts: See [Interactive Business Report with Google Charts](http://blog.klipse.tech/data/2017/03/15/google-charts.html).\n\nThe code editing inside the interactive snippets is powered by [CodeMirror](http://codemirror.net/).\n\n\n# How does it work?\n\n- JavaScript: [A new way of blogging about JavaScript](http://blog.klipse.tech/javascript/2016/06/20/blog-javascript.html)\n- Ruby: [A new way of blogging about ruby](http://blog.klipse.tech/ruby/2016/06/20/blog-ruby.html)\n- Clojure[Script]: [How to klipsify a clojure[script] blog post](http://blog.klipse.tech/clojure/2016/06/07/klipse-plugin-tuto.html)\n\n# Integration\n\nIn order to integrate the klipse plugin on a blog, library documentation or any other web page, you have to follow 3 simple steps.\n\n\n1. Make sure you have `\u003c!DOCTYPE html\u003e` at the top of your html file and  `\u003cmeta charset=\"utf-8\"\u003e` right after your `\u003chead\u003e` (It is required in order to display properly the CodeMirror elements used by Klipse.)\n\n2. Add css and custom configuration somewhere in the page (it could be in the `\u003chead\u003e` or in the `\u003cbody\u003e`) **before** the `\u003cscript\u003e` element of step #3.\nThe selector keys are per language (see below for a list of supported languages) and the value are the CSS selector of the elements that you want to klipsify.\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n        selector_eval_js: '.language-klipse-eval-js', // css selector for the html elements you want to klipsify\n    };\n\u003c/script\u003e\n```\n\n3. Add the `JavaScript` tag at the **end of the body tag** :\n\nFor Clojure:\n\n```html\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin/js/klipse_plugin.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nFor other languages:\n\n```html\n    \u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nHere is an [interactive guide](https://book.klipse.tech/) of the klipse snippets.\n\n\nIf you want to host Klipse JavaScript tag from your own server, see [Host Klipse Locally](#host-klipse-locally).\n\nIf you want to use an older version of Klipse, see [Use Older Versions](#use-older-versions).\n\n\n## JavaScript\n\n\nHere is the [full interactive guide](https://book.klipse.tech/interactive_javascript_code_snippets.html) of the klipse `JavaScript` snippets.\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n        selector_eval_js: '.language-klipse-eval-js', // css selector for the html elements you want to klipsify\n    };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n```\n\nHere is a [jsfiddle with Klipse plugin for JavaScript](https://jsfiddle.net/viebel/50oLnykk/).\nAnd here are detailed explanations about [a JavaScript live code editor in a blog post](http://untangled.io/how-to-use-the-live-code-editor/).\n\n## Clojure and ClojureScript in a web page\n\n\u003e Pay attention: for Clojure interactive snippets, you must use the **non-minified** version of klipse as for the moment, self-host cljs doesn't support advanced compilation!\n\nHere is the [full interactive guide](https://book.klipse.tech/interactive_clojure[script]_code_snippets.html\n) of the klipse `clojure` snippets.\n\nYou can manipulate the DOM inside KLIPSE: here is a [tutorial](http://read.klipse.tech/manipulating-the-dom-with-klipse-2/).\n\n\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n        selector: '.language-klipse'// css selector for the html elements you want to klipsify\n    };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin/js/klipse_plugin.js\"\u003e\u003c/script\u003e\n```\n\n## ClojureScript project\n\nIf you want to integrate Klipse inside a Clojurescript  project, it is recommended to consume Klipse as a Clojurescript library like any other Clojurescript lib, just like this [![Clojars](https://img.shields.io/clojars/v/viebel/klipse.svg)](https://clojars.org/viebel/klipse).\n\nInside your code you have to require two namespaces and call a function:\n\n```clojure\n(ns my.project\n  (:require [klipse.run.plugin.plugin] ;; this namespace initializes Klipse. We require it for its side effects\n            [klipse.plugin :as klipse-plugin]))\n\n(klipse-plugin/init #js {:selector \".language-klipse\"\n                         :selector_reagent \".language-reagent\"})\n\n```\n\nHere is an example of a [tiny reagent demo project](https://gitlab.com/viebel/clojurescript-reagent-klipse-demo) that integrates Klipse as a Clojurescript library.\n\n## Python\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n        selector_eval_python_client: '.language-klipse-python', // css selector for the html elements you want to klipsify\n    };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n```\n\n## Python3 (numpy, pandas)\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n        selector_pyodide: '.language-klipse-pyodide', // css selector for the html elements you want to klipsify\n    };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n```\n## Ruby\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n        selector_eval_ruby: '.language-klipse-eval-ruby', // css selector for the html elements you want to klipsify\n    };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n```\n\n## Lua\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/lua.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n        selector_lua: '.language-klipse-lua', // css selector for the html elements you want to klipsify\n    };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n```\n## Go\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n        selector_golang: '.language-klipse-go, // css selector for the html elements you want to klipsify\n    };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n```\n\n\n## Scheme\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n        selector_eval_scheme: '.language-klipse-eval-scheme', // css selector for the html elements you want to klipsify\n    };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n```\n\n## Prolog\n\nProlog code snippets are separated into two kinds:\n\n- Rules\n- Queries\n\nIn the query, you must omit the `?-` characters.\n\nSee [A new way of blogging about Prolog](http://blog.klipse.tech/prolog/2019/01/01/blog-prolog.html) for a full example and guide.\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/prolog.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n        selector_prolog_rules: '.language-prolog-rules', // css selector for the html elements that contain prolog rules\n        selector_prolog_query: '.language-prolog-query', // css selector for the html elements that contain prolog queries\n    };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js?v=7.7.1-a\"\u003e\u003c/script\u003e\n```\n\n## Common Lisp\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n        selector_eval_clisp: '.language-klipse-eval-clisp', // css selector for the html elements you want to klipsify\n    };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n```\n\n## OCaml\n\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n \t    selector_eval_ocaml: '.language-klipse-ocaml', // selector for ocaml evaluation snippets\n\t    selector_transpile_ocaml: '.language-transpile-ocaml' // selector for ocaml transpilation snippets\n    };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n```\n\n\n## ReasonML version 3\n\n\u003e Note: Code Snippets in Reason version 3 will automagically be upgraded to latest Reason version once a new version of Reason is released.\n\nWe have 4 kinds of ReasonML snippets:\n\n1. Code Evaluation\n2. Transpilation to JavaScript\n3. Transpilation to Ocaml\n4. Transpilation from Ocaml\n\nHere is the JavaScript tag that you need to setup for embedding ReasonML snippets on your page:\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n \t     selector_transpile_reason_3: '.language-transpile-reason', // selector for reason transpilation snippets\n         selector_transpile_reason_3_to_ocaml: '.language-transpile-reason-to-ocaml', // selector for reason transpilation into ocaml snippets\n         selector_eval_reason_3: '.language-klipse-reason',  // selector for reason evaluation snippets\n         selector_ocaml_to_reason: '.language-klipse-ocaml-to-reason' // selector for ocaml to reason snippets\n   };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n```\n\n## ReasonML - Old Syntax(deprecated)\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n    \t selector_transpile_reason: '.language-transpile-reason', // selector for reason transpilation snippets\n         selector_transpile_reason_to_ocaml: '.language-transpile-reason-to-ocaml', // selector for reason transpilation into ocaml snippets\n         selector_eval_reason: '.language-klipse-reason' // selector for reason evaluation snippets\n   };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n```\n\n## SQL\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/sql.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n     selector_sql: '.sql',\n    };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n```\n\n## PHP\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://storage.googleapis.com/app.klipse.tech/css/codemirror.css\"\u003e\n\n\u003cscript\u003e\n    window.klipse_settings = {\n        selector_eval_php: '.language-klipse-eval-php', // css selector for the html elements you want to klipsify\n    };\n\u003c/script\u003e\n\u003cscript src=\"https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js\"\u003e\u003c/script\u003e\n```\n\n\n\n## https\n\nIf your site runs under `https`, you need to load the klipse plugin from `https://storage.googleapis.com/app.klipse.tech` instead of `http://app.klipse.tech`.\n\nThe reason is that the klipse plugin is hosted on [Google Cloud Storage](https://cloud.google.com/storage/) and for the moment [SSL is not supported for custom domains](https://cloud.google.com/storage/docs/hosting-static-website#creating_a_cname_alias).\n\n## Configuration\n\nThe klipse plugin is configurable both at the level of the page and at the level of the snippet.\n\n### Page level configuration\n\n\nHere are the settings for the klipse plugin a page level:\n\n```javascript\nwindow.klipse_settings = {\n     eval_idle_msec: 20, // idle time in msec before the snippet is evaluated\n     selector: '.language-klipse', // selector for Clojure evaluation snippets\n     selector_js: '.language-klipse-js', // selector for Clojure transpilation snippets\n     selector_reagent: '.language-reagent', // selector for reagent snippets\n     selector_google_charts: '.language-google-charts' // selector for Google charts snippets\n     selector_oblivion: '.language-oblivion' // selector for oblivion snippets\n     selector_eval_js: '.language-klipse-eval-js', // selector for JavaScript evaluation snippets\n     selector_eval_ruby: '.language-klipse-eval-ruby', // selector for Ruby evaluation snippets\n     selector_lua: '.language-klipse-lua', // selector for lua evaluation snippets\n     selector_es2017: '.language-klipse-es2017', // selector for EcmaScript 2017 evaluation snippets\n     selector_jsx: '.language-klipse-jsx', // selector for JSX evaluation snippets\n     selector_transpile_jsx: '.language-transpile-jsx', // selector for JSX transpilation snippets\n     selector_render_jsx: '.language-render-jsx', // selector for JSX rendering snippets\n     selector_react: '.language-react', // selector for React snippets\n     selector_eval_php: '.language-klipse-eval-php', // selector for PHP evaluation snippets\n     selector_eval_markdown: '.language-klipse-markdown', // selector for Markdown transpilation snippets\n     selector_render_hiccup: '.render-hiccup', // selector for Hiccup rendering snippets\n     selector_transpile_hiccup: '.transpile-hiccup', // selector for Hiccup transpiling snippets\n     selector_eval_lambdaway: '.language-klipse-lambdaway', // selector for lambdaway transpilation snippets\n     selector_eval_python_client: '.language-klipse-python', // selector for Python evaluation snippets\n     selector_eval_cpp: '.language-klipse-cpp', // selector for cpp evaluation\n     selector_eval_html: '.language-klipse-html', // selector for Html evaluation snippets\n     selector_sql: '.language-klipse-sql', // selector for sqlite evaluation snippets\n     selector_eval_scheme: '.language-klipse-scheme', // selector for Scheme evaluation snippets\n     selector_brainfuck: '.language-klipse-brainfuck', // selector for Brainfuck snippets\n     selector_eval_ocaml: '.language-klipse-ocaml', // selector for Ocaml evaluation snippets\n     selector_transpile_ocaml: '.language-transpile-ocaml', // selector for Ocaml transpilation snippets\n     selector_transpile_reason_3: '.language-transpile-reason', // selector for Reason transpilation snippets\n     selector_transpile_reason_3_to_ocaml: '.language-transpile-reason-to-ocaml', // selector for Reason transpilation into ocaml snippets\n     selector_eval_reason_3: '.language-klipse-reason', // selector for Reason evaluation snippets\n     selector_ocaml_to_reason: '.language-klipse-ocaml-to-reason' // selector for Ocaml to reason snippets\n     cached_ns_root: '/my-root', // the root of Clojure cached namespace, default: https://viebel.github.io/cljs-analysis-cache/cache/\n     clojure_cached_macro_ns_regexp: /reagent.*/, // the regexp for Clojure macro namespaces that are cached\n     clojure_cached_ns_regexp: /reagent.*/, // the regexp for clojure namespaces that are cached\n     codemirror_root: '/my-codemirror-root', // the root of Codemirror files\n     scripts_root: '/my-scripts-root', // the root of scripts files (e.g pretty_format.js, opal.js ...)\n     re_evaluate_all_snippets_on_change: false, // Whether all snippets should be reevaluated when any one snippet is edited, since snippets might depend on each other\n     editor_type: 'code-mirror', //the type of the editor for Klipse results (the element where the evaluation of the snippet is displayed). Allowed values:\n                                 // \"code-mirror\": The input editor is codemirror. The output editor is codemirror\n                                 // \"html\": The input editor is codemirror. The output editor is html\n                                 // \"dom\": The input editor is plain text. The output editor is plain text\n\n\n};\n\n```\n\nAdditionally, you can configure CodeMirror input (snippet source code) and output (snippet evaluation) by setting `codemirror_options_in` and `codemirror_options_out`:\n\nCurrently, we support all the settings [CodeMirror Configuration settings](http://codemirror.net/doc/manual.html#config) and part of the [Addons settings](http://codemirror.net/doc/manual.html#addons):  `matchBrackets` and `autoCloseBrackets`.\n\nFor instance, you can modify the `indentUnit`, `lineWrapping`, `lineNumbers` and `autoCloseBrackets` like this:\n```javascript\nwindow.klipse_settings = {\n    codemirror_options_in: {\n        indentUnit: 8,\n        lineWrapping: true,\n        lineNumbers: true,\n        autoCloseBrackets: true\n    },\n    codemirror_options_out: {\n        lineWrapping: true,\n        lineNumbers: true\n    }\n}\n```\n\n#### Clojure only\n\n* `print_length`: (default 1000) max number of items in collections to display - useful to prevent browser stuck when evaluating infinite sequences like `(range)`\n* `beautify_strings`: (default false) when evaluation result is a string - display the \"interior\" of the string without escaping the quotes.\n\n\n### Snippet level configuration\n\nThe following attributes can be added to the DOM element of the snippet:\n\n* `data-eval-idle-msec`: (default 20) idle time in msec before the snippet is evaluated\n* `data-loop-msec`: (default `undefined`) the code is run in a loop every `data-loop-msec` msec\n* `data-preamble`: (default `\"\"`) A string containing Clojurescript source code that should be run before the contents of this snippet, eg \"(reset! canvas-id :canvas-2)\". Useful for hiding implementation details from readers in blog posts, like e.g. setting a `canvas-id` atom to `:canvas-2`, or for performing any other setup operations that need to be done on a per-snippet basis\n* `data-editor-type`: (default `\"code-mirror\"`) the type of the editor for the klipse result (the element where the evaluation of the snippet is displayed). Allowed values:\n  ** \"code-mirror\": The input editor is codemirror. The output editor is codemirror\n  ** \"html\": The input editor is codemirror. The output editor is html\n  ** \"dom\": The input editor is plain text. The output editor is plain text\n\n\n### JavaScript only\n\n* `data-external-libs`: comma separated list of JavaScript libraries to load before snippet evaluation\n* `data-async-code`: (default `false`) when `true`, asynchronous calls to `console.log` append their result to the result cell\n\n#### Clojure only\n\n\nHere is a [live demo](https://book.klipse.tech/interactive_clojure[script]_code_snippets.html) of the different snippet level configuration options.\n\nThe following data attributes are supported on a klipse snippet DOM element:\n\n* `data-static-fns`: (default `false`) set to true for using [static dispatch](http://blog.klipse.tech/clojurescript/2016/04/13/static-fns.html)\n* `data-external-libs`: comma separated list of github repositories to resolve dependencies: you need to provide the full list of dependencies (including the dependencies of dependencies recursively). See for instance [Lambda Calculus with clojure and Klipse](http://blog.klipse.tech/lambda/2016/07/24/lambda-calculus-2.html)\n* `data-print-length`: (default 1000) max number of items in collections to display - useful to prevent browser stuck when evaluating infinite sequences like `(range)`\n* `data-beautify-strings`: (default false) when evaluation result is a string - display the \"interior\" of the string without escaping the quotes.\n* `data-verbose`: (default false) passed to bootstrapped `eval` and `compile` `:verbose` opts\n* `data-max-eval-duration`: (default 1000) max number of milliseconds the snippet code is allowed to run synchronously before being interrupted.\n* `data-compile-display-guard`: (default false) when true, display the anti-starvation code inside result of compilation\n\n\n## Styling\nThe Klipse plugin can be easily styled with CSS, which can be applied both to the Klipse plugin's own elements, and to the CodeMirror editor's elements. Much of the styling you'll apply will be to CodeMirror, as it contains all the CSS classes to style the code itself. Surrounding CodeMirror is the Klipse plugin, the styles of which control the plugin's borders, and the executed code's output.\n\n## DOM elements\n\nEach klipse snippet is associated with 4 HTML elements:\n\n1. The klipse snippet itself: it has the class `klipse-snippet`.\n2. The result: it has the class `klipse-result`.\n3. A container: it has the class `klipse-container` and is accessible inside the klipse snippet through the global variable `klipse_container` (the global variable is dynamically bound to the correct klipse container).\n4. A separator: it has the class `klipse-separator`.\n\n\n### Changing the style of CodeMirror\nYou can change the theme of the CodeMirror editor simply by modifying its [CSS](http://codemirror.net/doc/manual.html#styling). If you don't want to create your own theme, Farhad Gayour has an awesome [list of ready-made themes](http://farhadg.github.io/code-mirror-themes/) you can select from. Have a look at the different themes by selecting them from the drop-down. Once you've found one you like, head to the [theme repo](https://github.com/FarhadG/code-mirror-themes/tree/master/themes) to copy the CSS, paste it into a CSS file, and link to it from the HTML page containing your Klipse plugin.\n\n### Changing the style of the Klipse plugin\nTo change the style of the Klipse plugin's borders and the console output, you'll need to add a few extra style rules to your CSS file. These are:\n\n- `.CodeMirror` - modify the plugin's borders and CodeMirror's containing `div`\n- `.CodeMirror:last-child::before` - modify the console's title (i.e. the bit that says _Output:_)\n- `.CodeMirror:last-child` - modify the console area (i.e. the area beneath _Output:_)\n\nYou can see an example of styling Klipse in `demos/styling`. And here is a [live demo](http://htmlpreview.github.io/?https://raw.githubusercontent.com/viebel/klipse/master/demos/styling/klipse.html)\n\n## Interactive slides with Klipse\n\nYou can build interactive slides by integrating Klipse with [Reveal.js](https://github.com/hakimel/reveal.js/) using this  [template for reveal.js and Klipse](https://github.com/timothypratley/asciidoctor-revealjs-klipse).\n\n## Klipse Community\n\nHere are a couple of examples of blogs using the klipse plugin:\n\n- Clojure: [Procedural Dungeon Generation: A Drunkard's Walk in ClojureScript](http://blog.jrheard.com/procedural-dungeon-generation-drunkards-walk-in-clojurescript)\n- Python: [Drawing fractals with a turtle](http://blog.klipse.tech/python/2017/01/04/python-turtle-fractal.html)\n- Clojure: [Island Generator](http://exupero.org/hazard/post/islands/)\n- ClojureScript transpiled: [blog.ducky.io - More about protocols in ClojureScript](http://blog.ducky.io/clojurescript/2016/06/08/more-defprotocol/)\n- Ruby: [jessewaites.com - interactive ruby snippets](http://jessewaites.com/embedding-interactive-ruby-snippets-into-web-pages/)\n- Clojure: [z.caudate.me - live documentation with klipse](http://z.caudate.me/klipse-demo/)\n- Ruby, Javascript, Clojure: [blog.klipse.tech](blog.klipse.tech)\n- Prolog: [A new way of blogging about Prolog](http://blog.klipse.tech/prolog/2019/01/01/blog-prolog.html)\n- Clojure documentation: [Anonymous functions in clojure](http://clojurebridge.github.io/community-docs/docs/clojure/anonymous-function/)\n- JavaScript: [Untangled.io - Advanced ES6 destructuring techniques with live examples](http://untangled.io/in-depth-es6-destructuring-with-assembled-avengers/)\n- Clojure: [Klipse for Kids: A fun way to learn computer programming](http://kids.klipse.tech/)\n- JavaScript [Immutable.js: An Introduction with examples written for humans](http://untangled.io/immutable-js-an-introduction-with-examples-written-for-humans/)\n- Clojure: [Yet another scheme dialect written in Clojure and ClojureScript](http://liujiacai.net/scheme.clj/)\n- JavaScript: [Try Partial Lenses with KLIPSE](http://calmm-js.github.io/partial.lenses/)\n- JavaScript: [Clause.js, a JavaScript contract system, documentation created with klipse](https://clause.js.org)\n- Clojure: Reagent deep dive part [1](http://timothypratley.blogspot.com/2017/01/reagent-deep-dive-part-1.html) [2](http://timothypratley.blogspot.com/2017/01/reagent-deep-dive-part-1.html) [3](http://timothypratley.blogspot.com/2017/01/reagent-deep-dive-part-3-sequences.html) [4](http://timothypratley.blogspot.com/2017/01/reagent-deep-dive-part-4-application.html)\n- ClojureScript: [Visualising Bézier Curves](https://040code.github.io/2017/07/12/bezier-in-clojurescript/)\n- Clojure: [core.async fun tutorial](http://abhirag.in/articles/batman_clojure.html)\n- ClojureScript: [reagent and reframe playground](https://day8.github.io/re-playground/)\n- JavaScript: [chai unit tests playground](https://e-zchai.firebaseapp.com/)\n- Clojure: [polynomial macro](http://markbastian.github.io/posts-output/2017-07-10-polymacro/)\n- Prolog: A scientific paper with [interactive code snippets](https://pages.di.unipi.it/forti/fogbrain/predicates/fogbrain/fogbrain2.html): [Continuous Reasoning for Managing Next-Gen Distributed Applications] (http://eptcs.web.cse.unsw.edu.au/paper.cgi?ICLP2020.22.pdf)\n\n\nAsk us any question about the klipse plugin (integration, feature requests...) on [![Join the chat at https://gitter.im/viebel/klipse](https://badges.gitter.im/viebel/klipse.svg)](https://gitter.im/viebel/klipse?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n## Access the CodeMirror editors programmatically\n\nEach code snippet is wrapped into a CodeMirror editor.\n\nThe CodeMirror editors are accessible via the JavaScript global variable: `klipse_editors`.\nThis is an array that contains the CodeMirror editors wrapping the original code snippets. For instance, you can modify the content of the code snippet `i` by calling: `klipse_editors[i].setValue('let a = 1');`\n\nHere is a [jsfiddle](https://jsfiddle.net/yhuh80ry/2/) that shows it in action.\n\nThe evaluation of each snippet is also wrapped into a CodeMirror editor. \nThe CodeMirror editors that wrapped results are accessible via the JavaScript global variable: `klipse_results`.\nThis is an array that contains the CodeMirror editors wrapping the results of the evaluation of the code snippets.\nFor instance, you can read the content of the code snippet `i` by calling: `klipse_results[i].getValue();`\n\nHere is a [jsfiddle](https://jsfiddle.net/viebel/4fpsug6t/5/) that shows it in action.\n\n## Use older versions\n\nSince version `6.8.0`, Klipse is published on [npm](https://www.npmjs.com/package/klipse). Therefore you can access the klipse files of a specific version from [unpkg](https://unpkg.com) - a cdn for stuff that is published to `npm`.\n\nFor instance, The urls are for the version `6.8.0` are:\n\n- JavaScript minified: https://unpkg.com/klipse@6.8.0/dist/klipse_plugin.min.js\n- JavaScript non-minified:  https://unpkg.com/klipse@6.8.0/dist/klipse_plugin.min.js\n- Css: https://unpkg.com/klipse@6.8.0/dist/codemirror.css\n\n## Host Klipse locally\n\nYou can download klipse with `npm` or `bower`.\n\nIn order to serve Klipse from your own server, you have to:\n\n1. Include in your page all the assets that you need from the `dist` folder: `codemirror.css`, `klipse_plugin.js` or `klipse_plugin.min.js`, `javascript.inc.js` (CodeMirror JavaScript addon), `pretty_format.js` (JavaScript beautifier)\n2. set `klipse_settings.no_dynamic_scripts=true;`\n\n\nIf you need more assets that are usually dynamically loaded by klipse, please download them manually.\n\n## Klipse App - Clojure Web Repl\n\nHere is the [information about the Klipse app](https://github.com/viebel/klipse/blob/master/contributing.md)\n\nThe Web REPL is live at http://app.klipse.tech\n\nHere is [the manual for the KLIPSE web repl](https://github.com/viebel/klipse/blob/master/repl.md).\n\nLanguages supported in the REPL: `Clojure` and `ClojureScript`.\n\n\n# License\n\nIf you like this stuff, please consider a (small donation) on [Patreon](https://www.patreon.com/bePatron?u=18227864).\n\nSee the [LICENSE](https://github.com/viebel/klipse/blob/master/LICENSE.txt) file for license rights and limitations (GNU General Public License v3.0).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviebel%2Fklipse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviebel%2Fklipse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviebel%2Fklipse/lists"}