live code in blog

KLIPSE 是一個可以產生互動式程式碼的網頁套件，換言之，在網頁上顯示你的程式碼，可以讓觀賞者修改並且輸出程式碼的結果。與其他顯示原始程式碼的 javascript 套件不同之處在於 live 與 interactive，live 的功能可以即時顯示程式碼的結果，interactive 讓使用者可以修改，因此，使用者可以在網頁、部落格上面修改程式碼，並且即時顯示修改後的結果。實際安裝測試，確實可以達到上面所提到的效果。

在 KLIPSE 文件有一段話：

In order to integrate the klipse plugin on a blog, library documentation or any other web page, add the following javascript tag at the end of the page body according to the language of the code snippets:

必須要安裝在網頁 body 標籤底部，實際測試時，只需將下列這一段程式碼放到最後：

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

另外兩個重要連結為：

<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-cpp', // css selector for the html elements you want to klipsify
    };
</script>

可以放到 head 標籤內部。接著就是撰寫測試的程式碼:

<pre><code class="language-klipse-cpp">#include &lt;ctime&gt;
#include &lt;iostream&gt;
using namespace std;

int main()
{
  const double sysTime = time(0);
  cout &lt;&lt; "System Time in seconds is: " &lt;&lt; sysTime &lt;&lt; "." &lt;&lt; endl;
  return 0;
}
</code></pre> 

若有其他的語言要呈現在網頁上，可以修改設定如下：

<script>
    window.klipse_settings = {
        codemirror_options_in: {
            lineWrapping: true,
            autoCloseBrackets: true
        },
        codemirror_options_out: {
            lineWrapping: true
        },
        beautify_strings: true,
        selector: '.language-klipse',
        selector_eval_js: '.language-klipse-eval-js',
        selector_jsx: '.language-klipse-jsx',
        selector_es2017: '.language-es2017',
        selector_brainfuck: '.language-brainfuck',
        selector_transpile_jsx: '.language-transpile-jsx',
        selector_eval_php: '.language-klipse-eval-php',
        selector_eval_markdown: '.language-klipse-markdown',
        selector_eval_lambdaway: '.language-klipse-lambdaway',
        selector_eval_python_client: '.language-klipse-python',
        selector_eval_html: '.language-klipse-html',
        selector_sql: '.language-klipse-sql',
        selector_eval_ruby: '.language-klipse-eval-ruby',
        selector_eval_scheme: '.language-klipse-scheme',
        selector_eval_cpp: '.language-klipse-cpp',
        selector_js: '.language-klipse-js',
        selector_reagent: '.language-reagent',
    };
</script>

這一則訊息來至於 Standard C++ 的 A new way of blogging about C++，有趣的是：

A long time ago, all the developers had a common dream. The dream was about interactivity, liveness, evaluation…
But we put this dream aside - because the browser understands only javascript.
And after a while, we even forgot that we ever had this dream.
Still, there are some people that didn’t forget this dream, like Alan Kay:

還是有人對於 dream 一直抱持著希望並且努力的想要實現它。

另外，有許多的 online compiler，例如：compiler-explorer，Wandbox，還有 for Python, html 等語言的 repl.it online compiler