Klipse, a new way of blogging
Mis a jours le 31 Aug 2021 à 13:00 · 327 mots · Lecture en 2 minutes
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.
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.)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">
<script>
window.klipse_settings = {
selector_golang: '.language-klipse-eval-js', // css selector for the html elements you want to klipsify
};
</script>
- Add the JavaScript tag at the end of the body tag :
<!-- ... -->
<body>
<!-- ... -->
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
</body>
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!
Conclusion
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.
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à :)