Interactive web applications are always more appealing than static sites. This blog explores using the klipse plugin to add interactive code snippets to this blog.
Very often seeing the output of running code is key. I was really excited when http://lighttable.com became available . It seems to be a very quiet project these days but the output and value of variables while working on the code is really exciting - especially when writing unit tests. The RED/GREEN refactor loop running as you type is a real boost
Adding a code block to Jekyll blog using asciidoc
- Asciidoc source code block
[code.language-klipse-go] (1)
---- (2)
import "fmt"
func main() {
fmt.Println("Hello all!")
}
---- (3)| 1 | Declare a code block with a language-klipse-go CSS class |
| 2 | Start of the code block |
| 3 | Terminate the code block |
When run through asciidoctor it renders like this and is editable!!
import "fmt"
func main() {
fmt.Println("Hello all!")
}To activate the code to be interactive and run in the browser in the plugin we need to include the plugin CSS and JavaScript Asciidoc allows us to use a passthrough block that we add to the article to include the bits we need.
++++
<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-go',
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
++++A more elaborate example
A more elaborate example importing a library.
| At the time of writing imports are not supported beyond the standard libraries. If you don’t see an error then it means that imports are now supported and please drop me a line. |
import (
"fmt"
"github.com/grahambrooks/fingerprint/fingerprinter"
)
func main() {
options := fingerprinter.Options{
GuaranteeThreshold: 4,
NoiseThreshold: 4,
}
fingerprint := fingerprinter.TextFingerprint("Some text as a source for the fingerprint", options)
fmt.Println(fingerprint)
}