No newline for the snippets of code

[Clem69B]

Newline are not generated from Markdown file for snippets of code. This is visible on the install page: http://buddycloud.com/install.

Thanks.

[imaginator]

@guilhermesgb Any ideas on this?

[Clem69B]

Maybe it's due to the code block syntax in your Markdown file. Usually, it seems necessary to use the tab characters or ``` instead of ~ ~ ~ ~ for code block

Here is a example: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code-and-syntax-highlighting

I hope this is useful...

[imaginator]

You are right - we also have the same issue on http://buddycloud.com/api

On 20 March 2014 10:46, Clément B. notifications@github.com wrote:

Maybe it's due to the code block syntax in your Markdown file. Usually, it seems necessary to use the tab characters or ``` instead of ~ ~ ~ ~ for code block

Here is a example: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code-and-syntax-highlighting

I hope this is useful...

— Reply to this email directly or view it on GitHubhttps://github.com/buddycloud/buddycloud.com/issues/35#issuecomment-38149197 .

Simon Tennant | buddycloud.com | +49 17 8545 0880 | office hours: goo.gl/tQgxP

[guilhermesgb]

Yeah, thanks for bringing this to our attention.

So, as far as I've investigated, fortunately it doesn't seem like the source of the problem is in the conversion from Markdown to HTML - I'm highly confident that our CSS is causing this problem.

(If you want to convice yourselves as well you can do this simple testing: edit the HTML source of any of these code blocks: you're going to notice that they are simply <pre></pre> tags with code inside. Try surrounding that code with <code></code> tags and see that "suddenly" we have the newlines back. In fact, that's the only difference between the code blocks in the http://buddycloud.com/install or http://buddycloud.com/api pages and the code blocks in the http://buddycloud.com/get-started page.)

One thing: our Markdown to HTML converter is mapping these code blocks to <pre> tags with no <code> tags surrounding the actual code snippets. I'm going to manually change this behavior myself (maybe by writing a postprocessor).

Then: I'm going to tweak our CSS a bit so that we can bring "the best of both worlds" in terms of how the code blocks surrounded only by <pre></pre> tags and the code blocks surrounded by <pre><code></pre></code> are being displayed. What I mean: the former have this problem of ignoring the newlines completely but they have this nice scrollbar on the x-axis whereas the latter preserve the newlines but they break lines when they're about to overflow. Would be nice if we preserve the newlines (thus allowing the code blocks to have any height, depending on the actual content) but have this scrollbar on the x-axis if need be.

What do you guys think?

[imaginator]

Guilherme -

Thanks for checking this out.

BTW, I've always found the x-axis scrollign a bit odd. For example we have to also do it with the sequence diagrams and the tables. Much better to just let them flow right. Perhaps we should do the same with code blocks.

[guilhermesgb]

@imaginator hum, I kinda think they are necessary, otherwise some of the automatically generated sequence diagrams e.g. http://buddycloud.com/api#media_ will just be too big to fit in the page (and thus there will be an unstyled x-axis scrollbar in the bottom of the window anyways).

Anyway I read your suggestion too late and did what I planned as a fix for this issue. Please see the install and api pages (the get-started page is as before) and let me know what you think.

[imaginator]

@vitoravelino - do you have any ideas on handling this? @guilhermesgb I notice a non buddycloud blue colour sneeking into our code formatting. #style-guide-police :)

[guilhermesgb]

Other strategies for displaying the sequence diagrams, tables and code blocks are welcome - the scrollbar is only being nicely styled on webkit-based browsers, after all.