Klipse, a new way of blogging

Mis a jours le 31 Aug 2021 à 13:00 · 330 mots · Lecture en 2 minutes blogging klipse programming

For a modern tech blogging framework, a live coding experience is quasi necessary.

Klipse is a JavaScript plugin for embedding interactive code snippets in tech blogs.

To make this easy, you add a small library to your blog front end dependency, and voilà, you have your <code></code> live executing in the browser. As a bonus, your code can no be edited directly in the <code></code> tags.

Go check out this blog post if you want to have more information about Klipse!

Klipsify your blogging framework

To integrate the klipse plugin on a blog, 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 to display properly 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 (you’ll find in GitHub 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">

    window.klipse_settings = {
        selector_golang: '.language-klipse-eval-js', // css selector for the html elements you want to klipsify

3) Add the JavaScript tag at the end of the body tag :

<!-- ... -->
    <!-- ... -->
    <script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>

Write some code

Now that you have installed Klipse on your blog, it remains to add some code to a blog post.

Add this code snippet to try it on:

import "fmt"

func main() {
  fmt.Println("Hello World! Klipse is so much fun !")

As you can see, this code is now live and interactive.

Feel free to modify it to your own liking!


Live and interactive coding was a long dream of mine when creating this blog.

Klipse made this dream super easy to integrate on my blog!

This post was inspired by @viebel.

Image de l'auteur Tom Moulard

L'auteur:  Tom Moulard

Depuis mon enfance, je suis captivé par les articles de science et de technologie. Un jour, j'ai décidé de faire partie de ce monde : j'ai pris ma calculatrice programmable (une TI-82 stat).... La suite, sur mon site

Vous avez vu une erreur ? Quelque chose ne va pas ? Vous pouvez contribuer à cette page sur GitHub ou laisser un commentaire en dessous. Merci d'être passé par là :)