Investigate switching to Prism for JS examples about interactive-examples HOT 15 CLOSED

Yeah, with the Brigade changes I'm liking the side borders again.

from interactive-examples.

So far experimentation is not going to badly at all. You can see where I am so far here:

https://mdn.github.io/interactive-examples/pages/js/array-concat.html

and here:

https://developer.allizom.org/en-US/docs/User:stephaniehobson:live

For some reason the top of the CSS examples page is displaying different to the rest. This is still a work in progress but, would love feedback around:

1. Does it look like this can work?
2. Should I continue?
3. What are we losing?
4. What do we gain?
5. What does this break, or make more unclear

Thoughts @stephaniehobson @wbamberg

from interactive-examples.

What do we gain?

So far, a lot less code

Also, not that I have switched to the Coy prism theme which seems pretty close to the one we are using on MDN at the moment.

from interactive-examples.

Ah ok, the reason the animation one breaks is because of the long single line comments. Could probably fix that with a break-word or something along those lines.

from interactive-examples.

As you say, what we gain is much less code, and it looks very promising. Some things I noticed:

• with the JS examples, you lose the highlighting of the relevant line (cf https://developer.mozilla.org/en-US/docs/User:wbamberg/Examples_on_top/Array.prototype.push():v2.2). I think this matters quite a bit.

• I'm not very keen on the striping for the JS, and think it's very distracting for the CSS

• with the JS examples, I like the way the whole pane gets line numbers

Not really related, but I saw the left-border reappeared? I'm not sure that's needed, now we have this arrow on the right.

from interactive-examples.

Ah ok, the reason the animation one breaks is because of the long single line comments. Could probably fix that with a break-word or something along those lines.

I think in general we should strive to have short enough examples (although yes, we do have to handle gracefully the cases where they overflow). I also think we should not include comments in these examples.

from interactive-examples.

Prism has a way to do line highlighting. It's used in "Test8" here: https://developer.mozilla.org/en-US/docs/User:stephaniehobson:code#Test8_Javascript_content_line_highlighting

I think we should remove the stripes and left borders but this is looking good!

I think the colour combination looks more editable :) Rather than implementing the MDN background colours the JS one should go to white and the CSS ones can go to the grey from before and the background can turn white when they are being edited.

from interactive-examples.

Thank you for the feedback @stephaniehobson and @wbamberg I will make the updates and yes, I was also meaning to add the line highlighting.

from interactive-examples.

Prism has a way to do line highlighting. It's used in "Test8" here: https://developer.mozilla.org/en-US/docs/User:stephaniehobson:code#Test8_Javascript_content_line_highlighting

So, this highlights specific lines that you predefine. It does not highlight the current line you are on, or hovering over. I believe that is more what @wbamberg is referring to?

http://prismjs.com/plugins/line-highlight/

from interactive-examples.

This looks like it could very useful, especially on the JS side:
http://prismjs.com/plugins/copy-to-clipboard/

It does not seem to work on the demo page ^^ but, perhaps the page is just missing the clipboard.js dependency. With that said though, adding our own button and have it use clipboard.js is probably even simpler, and lighter, than adding another plugin to Prism

Thoughts @wbamberg @stephaniehobson ?

from interactive-examples.

So, this highlights specific lines that you predefine. It does not highlight the current line you are on, or hovering over. I believe that is more what @wbamberg is referring to?

The main reason I wanted it was so when you load a page like https://developer.mozilla.org/en-US/docs/User:wbamberg/Examples_on_top/Array.prototype.push():v2.2, the example is 10 or so lines long, so it might be hard initially to see the line that matters (line 5 in the example linked). So highlighting it is supposed to help.

Would "highlighting specific lines you predefine" get weird if the user adds or removes lines before the highlighted one? i.e. is it more intended for read-only code samples?

This looks like it could very useful, especially on the JS side:
http://prismjs.com/plugins/copy-to-clipboard/

With the JS, I think it's unlikely people will want to copy the entire example: they're more likely to copy the single line. I think copy/paste is more useful for CSS than for JS, because CSS usually has more complex syntax. But either way, I think just letting people use the normal context menu or keyboard shortcuts is fine, I think they're quite discoverable without needing a button.

from interactive-examples.

Would "highlighting specific lines you predefine" get weird if the user adds or removes lines before the highlighted one? i.e. is it more intended for read-only code samples?

I would have to try this out to see how it responds. Generally I reckon Prism is targeted towards static examples but, let me try it out.

keyboard shortcuts is fine, I think they're quite discoverable without needing a button.

Makes sense to me.

from interactive-examples.

Ha! and then there is this https://chrome.google.com/webstore/detail/codecopy/fkbfebkcoelajmhanocgppanfoojcdmg

from interactive-examples.

Would "highlighting specific lines you predefine" get weird if the user adds or removes lines before the highlighted one? i.e. is it more intended for read-only code samples?

@wbamberg So, unfortunately it is fixed at the line set initially and does not dynamically move with the highlighted line. See below:

https://cl.ly/0p461G1B1e2c

from interactive-examples.

I have removed the background striping. With regards to the borders I was confused for a bit there but, I believe you are referring to these?

While these are wider, it matches those of other code examples on MDN such as here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

This is part of the coy Prism theme which seems to be the one that MDN is based on. I can of course override it to make the borders thinner or remove them entirely.

Thoughts @wbamberg @stephaniehobson

from interactive-examples.