embedding kipse in wordpress

[barkanido]

added a custom html block:

<link rel="stylesheet" type="text/css" href="https://app.klipse.tech/css/codemirror.css">
<script>
    window.klipse_settings = {
        selector: '.language-klipse'// css selector for the html elements you want to klipsify
    };
</script>
<script src="https://app.klipse.tech/plugin/js/klipse_plugin.js"></script>

then, in a new custom html block added

<pre><code class="language-klipse">(map inc [1 2 3])
</code></pre>

on developers tools I get:

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': The provided selector is empty.
    at bH (https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js:2142:235)
    at cH (https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js:2142:364)
    at https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js:2174:364

I have changed https://app.klipse.tech to HTTPS and now I think this is because of:

app.klipse.tech/css/codemirror.css:1 Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID

Mixed Content: The page at 'https://sograim.com/?p=62&preview=true' was loaded over HTTPS, but requested an insecure script 'http://storage.googleapis.com/app.klipse.tech/klipse_settings_wordpress_code.js'. This request has been blocked; the content must be served over HTTPS.

[viebel]

@barkanido Can you share a link to your page?

[barkanido]

https://sograim.com/clojure/test-klipse/

[viebel]

@barkanido The <script> tag that adds klipse to the page must be at the end of the body as it is specified here

[barkanido]

thanks, @viebel . Can you retest? it is still not working. just validating: "end of the body" must be the final tag? or just after the snippet?

also, I am seeing this in console:

Uncaught Error: No protocol method ISwap.-swap! defined for type object: [object Object]
    at Xc (VM4521 klipse_plugin.min.js:1115)
    at Function.re.J (VM4521 klipse_plugin.min.js:1143)
    at Function.Uh.J (VM4521 klipse_plugin.min.js:1283)
    at wl (VM4521 klipse_plugin.min.js:1545)
    at VM4521 klipse_plugin.min.js:1660

Another issue is that I needed to ask chrome to load unsafe scripts because I think that the certifacte was invalid.

[viebel]

@barkanido

1. "end of body" must be after the last Klipse snippets.
2. For Clojure snippets, the script to include is:

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

3. In your page, it seems that the script tags is included twice

[barkanido]

Yes, the docs mention one script tag for the window.klipse_settings (under the head tag) and another for the src after the code snippet in the body tag.

The script src tag is now correct and in this case, the code tag is

```eval-clojure
(map inc [1 2 3])
```

but it still looks like a preformatted text without any evaluation. also WDYT about

Another issue is that I needed to ask chrome to load unsafe scripts because I think that the certificate was invalid.

[viebel]

The Klipse snippet should be:

<pre class="language-klipse"><code>
  (map inc [1 2 3])
 </code></pre>

[barkanido]

finally! thanks a lot, @viebel for the support and debug. expect a reference at the blog :)

[barkanido]

for future reference, I have installed the WordPress plugin from this library, then I have used the "Insert Headers and Footers" plugin for WordPress and configured it with

<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">

<script>
    window.klipse_settings = {
        selector: '.language-klipse'// css selector for the html elements you want to klipsify
    };
</script>

in the header part and

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

in the footer part. Than, in the post, an HTML block with:

<pre class="language-klipse"><code>
  (map inc [1 2 3])
 </code></pre>

does the job.

[viebel]

@barkanido happy to help!