viebel / klipse Goto Github PK
View Code? Open in Web Editor NEWKlipse is a JavaScript plugin for embedding interactive code snippets in tech blogs.
Home Page: http://blog.klipse.tech/
License: GNU General Public License v3.0
Klipse is a JavaScript plugin for embedding interactive code snippets in tech blogs.
Home Page: http://blog.klipse.tech/
License: GNU General Public License v3.0
I just went to http://blog.klipse.tech/klipse/2016/09/09/klipse-languages.html and found what I needed - but it would be nice if the keys for other languages were listed in the readme, particularly selector_eval_python_client
since it has that extra suffix.
Hey, awesome tool! I'm trying to use this for some online code documentation, but there seems to be an issue with how the cursor renders. I have reproduced this in latest Chrome, Safari, and Firefox, and then, thinking it may be an issue with my template, copied the demo from https://jsfiddle.net/viebel/50oLnykk/ and ran it locally and the same issues occur.
Not sure if this is a browser quirk or something with klipse, but hopefully you can help me narrow this down. For some reason, the demo seems to work just fine in the jsfiddle, but I can't figure out for the life of me what could possibly be different. Note that there are not any additional stylesheets at play, just purely the css recommended by klipse.
Here is the minimal code that reproduces this issue locally:
<!doctype html>
<html>
<body>
<div class="klipse">
function foo(name) {
return "Hello " + name;
}
foo("Klipse");
</div>
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
selector_eval_js: '.klipse', // css selector for the html elements you want to klipsify
};
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
</body>
</html>
Thank you for your help!
I think that it would be awesome if it was possible for some Klipse snippets that return DOM fragments / SVG to have the result not displayed as text in a console output, but attached to the current DOM (the root could be a parameter ?).
It would allow to have interactive graphic code with Klipse, a nice thing imo.
Best Regards !
hi,
I love this kind of tool. I wouldn't want to make websites that depend on services though. It's not clear by the project's description if it uses a backend of some sort. Does it? If so or not, I'd recommended pointing that out as it's a selling point if it's backend free.
Thanks,
Francois
How hard would it be to get klipse to render html?
In the klipse app, the print box displayed data that is not pretty printed.
Take a look here:
http://app.klipse.tech/?cljs_in=(print%20(zipmap%20(range%2020)%20(range)))%0A(zipmap%20(range%2020)%20(range))%0A
In the left side, the data is pretty printed but in the right side it is not.
(print (zipmap (range 20) (range)))
(zipmap (range 20) (range))
It was useful to have it there, imho.
I mean the line
rlwrap lein run -m clojure.main scripts/figwheel.clj
I can define a function that is called &
, but when I try to call it klipse gives an error.
(def & identity)
;; Evaling just this returns what I'd expect
& ;=> #object[Function "function (a){return a}"]
;; But calling it doesn't work
(& 42) ;=>
#error {:message "Could not eval my.klipse",
:data {:tag :cljs/analysis-error},
:cause #error {:message "No method in multimethod 'cljs.analyzer/parse' for dispatch value: & at line 1 ",
:data {:file nil, :line 1, :column 1, :tag :cljs/analysis-error},
:cause #object[Error Error: No method in multimethod 'cljs.analyzer/parse' for dispatch value: &]}}
I'm trying to use klipse for clojure. I save the following html locally and open with Chrome but the evaluation is not happening.
<html>
<head>
<meta charset="utf-8">
<title>Foo</title>
<link rel="stylesheet" type="text/css" href="http://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="http://app.klipse.tech/plugin/js/klipse_plugin.js"></script>
</head>
<body>
<p>And now, we are going to <strong>klipsify</strong> this code snippet:</p>
<pre><code class="language-klipse">(map inc [1 2 3])
</code></pre>
</body>
</html>
Is this supposed to work? Or am I missing anything?
I'm using Chrome 51.0.2704.103 (64-bit) on OSX and I can see the following logs in developer console. I don't see any errors.
KLIPSE version: 1.0.1
klipse_plugin.js:12959 register-mode: eval-clojure selector
klipse_plugin.js:12959 register-mode: transpile-clojurescript selector_js
klipse_plugin.js:12959 register-mode: eval-ruby selector_eval_ruby
klipse_plugin.js:12959 register-mode: eval-javascript selector_eval_js
klipse_plugin.js:12959 settings: #js {:selector .language-klipse}
klipse_plugin.js:12959 (settings): [object Object]
klipse_plugin.js:12959 settings: {"selector" ".language-klipse"}
klipse_plugin.js:12959 (keys (clojure.core/deref selector->mode)): ("selector" "selector_js" "selector_eval_ruby" "selector_eval_js")
klipse_plugin.js:12959 (array-seq (js/document.querySelectorAll selector)):
klipse_plugin.js:12959 klipsify-elements: nil eval-clojure
klipse_plugin.js:12959 "Elapsed time: 0.055000 msecs"
When you're editing code it's good practice to keep it syntactically correct as much as possible.
Certain editors make it difficult; for example "Intellisense" is really dumb about this grabbing various keys and generally behaving like a headless chicken.
OTOH, various editors try to be helpful, inserting the closing structure automatically when you enter the start of a loop or condition. This doesn't always work very well either.
Currently, klipse is probably one of the least helpful I've come across. You basically have to force a syntax error at the top of the code to keep it from crashing and if you (for example) decrement the wrong variable within a loop you lose what you've typed.
The solution is simple in concept; the code should only run until the next keypress ... no more.
this is a very low-priority suggestion, and might not be a good idea, but i'm going to write it down before i forget it :) feel free to close this issue if you think it's not worth doing.
app.klipse.tech urls can be very long, eg:
it would be nice if they instead were very short, like http://pastebin.com/2XHwK6FP
i haven't thought at all about how this would be implemented, and am not planning on immediately looking into it and implementing it myself, but figured i'd record this suggestion in case it's useful.
When evaluating (map inc 1234)
I get the message 1234 is not ISeqable
.
But when evaluating (str hello world)
no error message is displayed in the cljs panel, Instead
;; Press Ctrl-Enter or wait for 3 sec to eval in clojure...
is written.
The is currently a reference to a site that used data-external-libs
, but by the time you inspect the html on that page, the div that had the data-external-libs=""
has already been replaced by CodeMirror. It would be nice to have a simple example showing what the html element should look like.
<div class="klipse code-block" data-external-libs="https://raw.githubusercontent.com/diminishedprime/anagrams/master/src/">
(ns your-namespace
(:require [anagrams.core :as anagrams]))
</div>
It would be great to be able to show life HTML snippets :)
Example:
<pre><code class="klipse-html">
<h1>Hi</h1>
</code></pre>
Should render:
<h1>Hi</h1>
Then if the user changes the box to Hello, it updates :)
Noticed that there are externally hosted libraries hardcoded into the dist/ plugin files. For example:
...sistentVector.EMPTY_NODE,["https://viebel.github.io/klipse/repo/js/pretty_format.js"],null),cljs.core.cst$kw$comment_DASH_str,"//"],null);
klipse.common.registry.register_mode("eval-...
I seem to be missing information on how to change those. Is there a build argument or something I can use? I don't want to depend on those external files, or even the responsibility to ensure a network connection for this code to run.
Great tool!
Might use this implementation
I used a very basic setup, and tested with Chrome:
<div class="klipse">
1/0
</div>
<link rel="stylesheet" type="text/css" href="http://app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {selector_eval_js: '.klipse'};
</script>
<script src="http://app.klipse.tech/plugin/js/klipse_plugin.min.js"></script>
Unlike other Clojurescript-bootstraped REPLs I have tried, KLIPSE doesn't evaluate simple non-list expressions to themselves...
Example: "hello" should evaluate to itself, but instead the result is nil
I was trying to test the following code snippet on klipse (range -10 10)
.
However, when typing up to (range)
the whole page freezes!
First of all: I really love what you created. Great idea very well executed!
Unless I am mistaken, if you want to use klipse, you fetch it from http://app.klipse.tech/plugin_prod/js/
. This means you always need a internet connection if you want to use it. Sometimes I do not want to rely on internet.
Obviously I could manually download klipse and store it locally and reference it from there. I would rather do this in an automated fashion. I personally would like to use bower for that.
Bower calls itself a package manager for the web. It allows to specify which dependencies your project has and fetch them with the bower command line interface.
Would you be interested in publishing your artifacts to bower?
To have a feel for what you get yourself into below your find a series of steps
bower.json
describing the project and what to serve.I am willing and able to put in the work of creating bower.json
in a pull-request.
I couldn't come up with a better title. Sorry.
When opening a new article on the Klipse blog the site starts out scrolled to the top, but the more content gets loaded in, the more the page scrolls down. On the defprotocol article for instance, a fully loaded page ends up opened 85% through (see attached screenshot).
This happens on both Safari / OS X.10.3 and on the latest Firefox (same OS)
I'm having trouble using an external library with cljc files and macros. Klipse complains that a macro in one namespace doesn't exist in a file that contains a different namespace, which is non-sensical to point out (and yet true). Not sure what the issue is.
To reproduce:
It would be great if, on a mac, cmd-enter
would work as well as ctrl-enter
as the shortcut to reevaluate the snippet. cmd
is more idiomatic on macs.
Live evaluation is not working when I open http://blog.klipse.tech/clojure/2016/05/30/spec.html.
When evaluating the followings
(ns my.spec
(:require [cljs.spec :as s]))
(ns my.spec
(:require [cljs.spec :as s]))
I got the following error.
#error {:message "No such namespace: goog.object, could not locate goog/object.cljs, goog/object.cljc, or Closure namespace \"goog.object\"", :data {:tag :cljs/analysis-error}}
I'm getting the same error for all evaluations in the article. Live evaluation seems working on other articles: i.g. http://blog.klipse.tech/clojure/2016/06/07/klipse-plugin-tuto.html
I'm using Chrome 51.0.2704.103 on OSX 10.11.4 (15E65). The page works on Safari.
It would be nice to see credits for what libraries have been used, for instance, the replit library used for C++.
Firstly, awesome project, thank you for the great work!
I was trying to integrate klipse with react components, but it doesn't seem to work
http://jsbin.com/kobahoquvu/edit?html,js,output
Did I miss something? or is there a way that I can manually restart the klipse?
With this issue I would like to gauge the interest to support oCaml in klipse.
BuckleScript is an excellent oCaml to JavaScript compiler, that also runs in the browser.
If there is interest, I am willing and hopefully able to provide a pull request integrating oCaml in klipse
It would be nice if the generated javascript could be pretty printed.
I think it should be possible to do it via js-beautify.
Try the following values in klipse:
:foo
"foo"
123
Neither of them seem to print a result.
Get inspired by http://jaredforsyth.com/reepl/
CodeMirror supports auto completion https://codemirror.net/demo/complete.html
reveal.js is a HTML presentation framework. Multiple persons have mentioned in interest in integrating klipse into reveal, notably @viebel, @titaniumbones and myself. There are probably others as well.
Integrating klipse into reveal is hard because of the way that reveal uses CSS. It is very opinionated and has liberal use of !important
, which often does not play nice with other frameworks and libraries. See for example CSS conflict with reveal.js.
This issue is created to keep track of the progress of and interest in integrating klipse into reveal
I think it would be great to have Klipse snippets in presentations. Reveal.js is a pretty popular way to make online presentations, and I use it from emacs org mode thanks to org-reveal that let me add raw HTML.
I tried some simple test but the result is unconvincing (watch out for httpS automatic redirect, one must use the http because of the reveal.js http source).
A way to embed Klipse in reveal.js presentations would be great !
Best Regards.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.