Giter Site home page Giter Site logo

vitaliy-hnatyk / klipse Goto Github PK

View Code? Open in Web Editor NEW

This project forked from viebel/klipse

0.0 1.0 0.0 53.28 MB

A simple client-side code evaluator pluggable on any web page: clojure, ruby, javascript, python, scheme, es2017, jsx, brainfuck, c++, reagent

Home Page: http://blog.klipse.tech/

License: GNU General Public License v3.0

Clojure 96.55% HTML 0.25% PHP 0.64% JavaScript 2.57%

klipse's Introduction

KLIPSE Circle CI Join the chat at https://gitter.im/viebel/klipse Codewake npm version

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

Plugin

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

  1. Live: The code is executed in your browser
  2. 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!

Live demo

With the klipse plugin, the code is evaluated as you type...

Here is a live demo of the embedding of klipse in a web page.

Javascript Ruby
abc abc
PHP Clojure
abc abc

Supported languages

The code editing inside the interactive snippets is powered by CodeMirror.

How does it work?

Integration

In order to integrate the klipse plugin on a blog, library documentation or any other web page, you have to follow 3 simple steps.

  1. Make sure you have <!DOCTYPE html> at the top of your html file and <meta charset="utf-8"> right after your <head> (It is required in order to display properly the CodeMirror elements used by Klipse.)

  2. Add css and custom configuration somewhere in the page (it could be in the <head> or in the <body>) before the <script> element of step #3. The 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.

<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>
  1. Add the javascript library at the end of the body tag :
    <script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
</body>

Here is an interactive guide of the klipse snippets.

If you want to host the javascript tag from your own server, see Host Klipse Locally.

If you want to use an older version of Klipse, see Use Older Versions.

javascript

Here is the full interactive guide of the klipse javascript snippets.

<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>

Here is a jsfiddle with the klipse plugin for javascript. And here are detailed explanations about a javascript live code editor in a blog post.

clojure

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!

Here is the full interactive guide of the klipse clojure snippets.

You can manipulate the DOM inside KLIPSE: here is a tutorial.

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

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

python

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

<script>
    window.klipse_settings = {
        selector_eval_python_client: '.language-klipse-python', // 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>

ruby

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

<script>
    window.klipse_settings = {
        selector_eval_ruby: '.language-klipse-eval-ruby', // 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>

Scheme

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

<script>
    window.klipse_settings = {
        selector_eval_scheme: '.language-klipse-eval-scheme', // 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>

PHP

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

<script>
    window.klipse_settings = {
        selector_eval_php: '.language-klipse-eval-php', // 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>

https

If 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.

The reason is that the klipse plugin is hosted on Google Cloud Storage and for the moment SSL is not supported for custom domains.

Configuration

The klipse plugin is configurable both at the level of the page and at the level of the snippet.

Page level configuration

Here are the settings for the klipse plugin a page level:

window.klipse_settings = {
          eval_idle_msec: 20, // idle time in msec before the snippet is evaluated
          selector: '.language-klipse', //selector for clojure evaluation snippets
          selector_js: '.language-klipse-js', // selector for clojure transpilation snippets 
          selector_reagent: '.language-reagent', // selector for reagent snippets
		  selector_google_charts: '.language-google-charts' // selector for google charts snippets
		  selector_oblivion: '.language-oblivion' // selector for oblivion snippets
          selector_eval_js: '.language-klipse-eval-js', // selector for javascript evaluation snippets
          selector_eval_ruby: '.language-klipse-eval-ruby', //selector for ruby evaluation snippets
          selector_es2017: '.language-klipse-es2017', // selector for EcmaScript 2017 evaluation snippets
          selector_jsx: '.language-klipse-jsx', // selector for jsx evaluation snippets
          selector_transpile_jsx: '.language-transpile-jsx', // selector for jsx transpilation snippets
          selector_render_jsx: '.language-render-jsx', // selector for jsx rendering snippets		  
		  selector_react: '.language-react', //selector for react snippets
          selector_eval_php: '.language-klipse-eval-php', // selector for php evaluation snippets
          selector_eval_markdown: '.language-klipse-markdown', // selector for markdown transpilation snippets
          selector_eval_lambdaway: '.language-klipse-lambdaway', // selector for lambdaway transpilation snippets
          selector_eval_python_client: '.language-klipse-python', // selector for python evaluation snippets
		  selector_eval_cpp: '.language-klipse-cpp', // selector for cpp evaluation
          selector_eval_html: '.language-klipse-html', // selector for html evaluation snippets
          selector_sql: '.language-klipse-sql', // selector for sqlite evaluation snippets
          selector_eval_scheme: '.language-klipse-scheme', // selector for scheme evaluation snippets
	  selector_brainfuck: '.language-klipse-brainfuck',
	  secured_eval: true/false, //secured mode (default: false)
	  cached_ns_root: '/my-root', // the root of clojure cached namespace
	  clojure_cached_macro_ns_regexp: /reagent.*/, // the regexp for clojure macro namespaces that are cached
	  clojure_cached_ns_regexp: /reagent.*/, // the regexp for clojure namespaces that are cached
	  codemirror_root: '/my-codemirror-root', // the root of codemirror files
	  scripts_root: '/my-scripts-root', // the root of scripts files (e.g pretty_format.js, opal.js ...)
	  
};

Additionaly, you can configure CodeMirror input (snippet source code) and output (snippet evaluation) by setting codemirror_options_in and codemirror_options_out:

Currently, we support all the settings CodeMirror Configuration settings and part of the Addons settings: matchBrackets and autoCloseBrackets.

For instance, you can modify the indentUnit, lineWrapping, lineNumbers and autoCloseBrackets like this:

window.klipse_settings = {
    codemirror_options_in: {
        indentUnit: 8,
        lineWrapping: true,
        lineNumbers: true,
        autoCloseBrackets: true
    },
    codemirror_options_out: {
        lineWrapping: true,
        lineNumbers: true
    }
}

Secured mode

Learn mode about Klipse secured mode.

Clojure only

  • print_length: (default 1000) max number of items in collections to display - useful to prevent browser stuck when evaluating infinite sequences like (range)
  • beautify_strings: (default false) when evaluation result is a string - display the "interior" of the string without escaping the quotes.

Snippet level configuration

The following attributes can be added to the DOM element of the snippet:

  • data-eval-idle-msec: (default 20) idle time in msec before the snippet is evaluated
  • data-loop-msec: (default undefined) the code is run in a loop every data-loop-msec msec
  • 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.

Javascript only

  • data-external-libs: comma separated list of javascript libraries to load before snippet evaluation
  • data-async-code: (default false) when true, asynchronous calls to console.log append their result to the result cell

Clojure only

Here is a live demo of the different snippet level configuration options.

The following data attributes are supported on a klipse snippet DOM element:

  • data-static-fns: (default false) set to true for using static dispatch
  • 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 Caclulus with clojure and Klipse
  • data-print-length: (default 1000) max number of items in collections to display - useful to prevent browser stuck when evaluating infinite sequences like (range)
  • data-beautify-strings: (default false) when evaluation result is a string - display the "interior" of the string without escaping the quotes.
  • data-verbose: (default false) passed to boostrapped eval and compile :verbose opts
  • data-max-eval-duration: (default 1000) max number of milliseconds the snippet code is allowed to run synchronously before being interrupted.
  • data-compile-display-guard: (default false) when true, display the anti-starvation code inside result of compilation

Styling

The 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.

Changing the style of CodeMirror

You can change the theme of the CodeMirror editor simply by modifying its CSS. If you don't want to create your own theme, Farhad Gayour has an awesome list of ready-made 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 to copy the CSS, paste it into a CSS file, and link to it from the HTML page containing your Klipse plugin.

Changing the style of the Klipse plugin

To 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:

  • .CodeMirror - modify the plugin's borders and CodeMirror's containing div
  • .CodeMirror:last-child::before - modify the console's title (i.e. the bit that says Output:)
  • .CodeMirror:last-child - modify the console area (i.e. the area beneath Output:)

You can see an example of styling Klipse in demos/styling. And here is a live demo

Klipse Community

Here are a couple of examples of blogs using the klipse plugin:

Ask us any question about the klipse plugin (integration, feature requests...) on Join the chat at https://gitter.im/viebel/klipse

Use older versions

Since version 6.8.0, Klipse is published on npm. Therefore you can access the klipse files of a specific version from unpkg - a cdn for stuff that is published to npm.

For instance, The urls are for the version 6.8.0 are:

Host Klipse locally

You can download klipse with npm or bower.

In order to serve Klipse from your own server, you have to:

  1. 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)
  2. set klipse_settings.no_dynamic_scripts=true;

If you need more assets that are usually dynamically loaded by klipse, please download them manually.

Klipse App - Clojure Web Repl

Here is the information about the Klipse app

The Web REPL is live at http://app.klipse.tech

Here is the manual for the KLIPSE web repl.

Languages supported in the REPL: clojure and clojurescript.

License

See the LICENSE file for license rights and limitations (GNU General Public License v3.0).

klipse's People

Contributors

viebel avatar raphaelboukara avatar flyjwayur avatar dvberkel avatar moxaj avatar elyahou avatar dupuchba avatar bzg avatar jrheard avatar bundance avatar gitter-badger avatar timothypratley avatar polytypic avatar settinghead avatar alanbernstein avatar benhalpern avatar

Watchers

Vitaliy Hnatyk avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.