Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Adds code REPLs in markdown using Klipse


npm install --save gatsby-plugin-klipse

How to use

// In your gatsby-config.js
plugins: [
    resolve: 'gatsby-plugin-klipse',
    options: {
      // Class prefix for <pre> tags containing code examples
      // defaults to empty string
      // if you use PrimsJS for example then add `language-` as the prefix
      classPrefix: '',
      // Klipse config, you can check it here
      // https://github.com/viebel/klipse#configuration
      klipseSettings: { ... },
      // Klipse version, defaults to '7.5.0'
      klipseVersion: '7.5.0',
      // To load any external scripts you need, pass an array of URLs. The plugin will always load them before the klipse plugin
      // defaults to an empty Array
      externalScripts: [],

Usage in Markdown

This will create a JavaScript REPL

1 + 1

This will create a Ruby REPL

[ 1, 2 ] * 3

The text that you pass after the backticks needs to match the part after selector_ keys in this object, these are default selectors used by the plugin:

  selector: '.klipse', //selector for clojure evaluation snippets
  selector_brainfuck: '.klipse-brainfuck', // selector for brainfuck snippets
  selector_es2017: '.klipse-es2017', // selector for EcmaScript 2017 evaluation snippets
  selector_eval_cpp: '.klipse-cpp', // selector for cpp evaluation
  selector_eval_html: '.klipse-html', // selector for html evaluation snippets
  selector_eval_js: '.klipse-eval-js', // selector for javascript evaluation snippets
  selector_eval_lambdaway: '.klipse-lambdaway', // selector for lambdaway transpilation snippets
  selector_eval_markdown: '.klipse-markdown', // selector for markdown transpilation snippets
  selector_eval_ocaml: '.klipse-ocaml', // selector for ocaml evaluation snippets
  selector_eval_php: '.klipse-eval-php', // selector for php evaluation snippets
  selector_eval_python_client: '.klipse-python', // selector for python evaluation snippets
  selector_eval_reason: '.klipse-reason', // selector for reason evaluation snippets
  selector_eval_ruby: '.klipse-eval-ruby', //selector for ruby evaluation snippets
  selector_eval_scheme: '.klipse-scheme', // selector for scheme evaluation snippets
  selector_google_charts: '.klipse-google-charts', // selector for google charts snippets
  selector_js: '.klipse-js', // selector for clojure transpilation snippets
  selector_jsx: '.klipse-jsx', // selector for jsx evaluation snippets
  selector_oblivion: '.klipse-oblivion', // selector for oblivion snippets
  selector_react: '.klipse-react', //selector for react snippets
  selector_reagent: '.klipse-reagent', // selector for reagent snippets
  selector_render_jsx: '.klipse-render-jsx', // selector for jsx rendering snippets
  selector_sql: '.klipse-sql', // selector for sqlite evaluation snippets
  selector_transpile_jsx: '.klipse-transpile-jsx', // selector for jsx transpilation snippets
  selector_transpile_ocaml: '.klipse-transpile-ocaml', // selector for ocaml transpilation snippets
  selector_transpile_reason: '.klipse-transpile-reason', // selector for reason transpilation snippets
  selector_transpile_reason_to_ocaml: '.klipse-transpile-reason-to-ocaml', // selector for reason transpilation into ocaml snippets
© 2023 Gatsby, Inc.