Improve Readability

[mrflix]

before after

[xMartin]

Great stuff! Big improvement I think.

Could you also improve the style of the code examples in the text? I think the line height could be a bit less and maybe different font / font size? Even a background color or box? We have to do that stuff for two other repos so would be nice to have it all in one pull request.

[mrflix]

added

[mrflix]

a smart syntax highlighter library like http://alexgorbatchev.com/SyntaxHighlighter/ would be awesome, but I understand that it's hard to integrate it since all the files are static and you'd have to add the javascript and css files to all of them.

What do you think about adding a syntax highlighter library?

[xMartin]

Would be great if the style of the code examples matches the view of the editor. Haven't thought about how to do that, yet.

I think if all we have to do is adding a few tags to each HTML file that would be ok.

You wanna go for it or should we merge what we have and add to the other repos first?

[mrflix]

What editor do you mean? The sandbox?

Yeah, it's adding two javascript files and a function call:

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script> SyntaxHighlighter.all(); </script>

one css file:

<link rel="stylesheet" href="css/shCoreDefault.css">

and a class="brush: js;" added to every <pre>.

It will look like this:

There is another simpler library called highlight.js that looks like this: You have to add the library and remove perl because it does auto-detection and sometimes confuses javascript with perl:

<script src="js/highlight.min.js"></script>
<script>
  delete hljs.LANGUAGES.perl;
  hljs.initHighlightingOnLoad();
</script>

Thats all.

[xMartin]

Great work so far! Let's finish styling first. Syntax highlighting needs more thought maybe.

Wanna do pull requests for https://github.com/OpenTechSchool/js-beginners-day2 and https://github.com/OpenTechSchool/js-beginners-4h-workshop-1, too (so you get the credit :) )? But I can do it, too.