JS plugin to highlight & run javascript in the page - javascript

I'm writing the documentation of a JS lib and I frequently insert code examples. What I would like is to allow users to edit et execute these examples (with a RUN button for example).
Does someone know a light js plugin which could do that? (with code highlighter).
Edit: just something to run JS code, like a very simple web console, no need to edit CSS and HTML.

Codepen allows you to embed code samples with syntax highlighting, and an ability to run them in a sandboxed environment.
Here's an example code snippet for embedding (so this answer doesn't get flagged for not having code, but really the docs are extremely easy to read):
<p data-height="268" data-theme-id="0" data-slug-hash="ClnAe" data-user="afkatja" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/chriscoyier/pen/ClnAe'>ClnAe</a> by Katja Hollar (<a href='http://codepen.io/afkatja'>#afkatja</a>) on <a href='http://codepen.io'>CodePen</a></p>
Here's a blog post from Codepen with more details on how-to.
Here's an example of a blog post that uses an embedded Codepen.
Edit: Just realized you wanted the code samples to be editable. I'm afraid that's a Codepen PRO feature as documented in this blog post. So still an option perhaps, but there may be alternatives that do it for free.

Related

Javascript library that creates Custom QR Codes with a logo in the middle?

I would like to create a custom qr code with javascript that contains a logo in the middle.
I already found this project on github:
https://github.com/kaarposoft/qrlogo
but unfortunately this script creates 1000 qr codes, whereupon the logo is always positioned differently, apart from that this project is not really easy to handle. (no documentation etc). I have rewritten in such a way that only one qr code is generated and not more than one and also that it uses an img tag instead of waiting for an upload. Nevertheless, this is not optimal because the logo is always randomly on the qr code and it is a project and not a library.
So I would like to know if someone knows a library or has programmed something to generate a qr code with javascript from an img tag and a string.
Many greetings and thanks.
qrcode-with-logos does the trick for me. I also came across easyqrcodejs which has a lot of extra features, though I have not yet used it myself.
Checkout the Zebra Crossing project.
It has ports to many languajes, including javascript.
zxing project on GitHub

JavaScript Site with working examples

I saw a website a little while ago that had columns for JavaScript/HTML/CSS and below it had what the actual code would look like. Kind of like jsFiddle, but it had user examples and demos. Does anyone know the name of this site? I can't find it anywhere! THanks!
You are most likely talking about CodePen, which is a site with an active community and many demos viewable right on the page with the source code.

How do I post a jsfiddle example of some trouble I'm seeing in Rails?

This may be a very basic question, but is it possible to post a jsfiddle that captures a Rails environment, the js, css, and HTML that is generating a nagging problem? I posted another SO question here: Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right
... and it was suggested I post something to jsfiddle. Honestly, I'm just completely in the dark as to how I might gather the css, js, and HTML in a way that can be copy-pasted into jsfiddle. Is there some slick way to pull the 4 necessary components together?
I am mostly interested in being being able to share and debug code that pertains to display and layout.
Many thanks in advance.
Sites like jsfiddle and jsbin are useful as testbeds for various issues involving HTML, CSS, and JavaScript. A good workflow for using them might be as follows:
Before going to one of those sites, use a browser debugger (Firebug, the Chrome debugger, or even the debugger in modern versions of IE if you must) to figure out the mechanics of the issue. Are you seeing unexpected JavaScript behavior? Weird layout? Whatever the problem, see if you can narrow the focus as much as possible.
Now, go to one of the workbench sites (make an account for yourself too; it helps to be able to find old experiments) and start trying to reproduce the problem. Start as simply as possible and work up. It can be hard and frustrating, but in my experience even the process of trying to figure out an isolating test case can itself lead to enlightenment :-)
If you do manage to isolate a behavior that you don't understand or can't explain or whatever, you can then save the test case (jsfiddle has "Save" and "Update" buttons; jsbin seems to magically save things automatically) and then post the URL here (or anyplace else). If you do post here, it's a good idea to copy the relevant code from your test case directly into your question.
I use both of those sites (and there may be more of them out there). The jsbin site gives you a little more control over your page, and provides a way to see your page outside of an <iframe>. That's kind-of important if you're testing for mobile applications. Otherwise they're both great resources.
Oh, and both sites let you import various popular libraries via simple configuration tools. That's really handy for tracking bugs that you think may have been introduced by a library version change (rare, but really freaky when it happens).

Online source code editing element

I'm wondering if there is some sort of element (preferably jQuery since this library is used) which enables online editing in a (converted) textarea. Basically what I'm looking for is a framework for textarea tabbing and syntaxhighlighting for basic online source-code editing that I can embed in my site. Any suggestions? My Google attempts result in RTE-editors having a 'show code' button which is not what I'm looking for, obvious.
CodeMirror is the serious alternative to ACE. It's used by various projects, including jsFiddle (mentioned in another answer), jsbin and Google Code.
If you want something you can embed on your site, try ACE. Here's a demo.
Sounds like jsfiddle.net may give you what you're looking for.

How to highlight (un)used JavaScript live in Dreamweaver

I am working in Dreamweaver CS4 and implemented JQuery code that I found online for a gallery function.
I am only using a very small part of the gallery functions available, and would like to delete the unused script in order to get more clarity and a cleaner script. But as a JavaScript beginner I can't identify what is important and what is not.
My question: Is there a way in Dreamweaver to view/highlight the JS code that the site is using? I am imagining a tool that you could turn on when running the live view that would visualize the portions of code that is being used.
Or, the other way round, is there a way to highlight the unused code.
The live code button doesn't seem to do this.
Thanks for your help!
My question: Is there a way in Dreamweaver to view/highlight the JS code that the site is using?
No. You would need to use Firebug or a similar javascript tracker/debugger to see how the code is used. The most DW will tell you is which external files are linked to a page.

Categories