Code on create Sidechain not justified. about elementsproject.org HOT 8 OPEN

Hmmm, thanks for the report. I can fix this by adding the following CSS incantation to the pre tag:

white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;

But the result is kind of ugly because of where the linebreaks go. What is your suggestion exactly with the div tag? I'm not a web guy, a quick google turned up stackoverflow suggesting the CSS above but whatever works I can do.

EDIT: I'm not a web guy, left out a word there.

from elementsproject.org.

lol at the term 'CSS incantations'. I'm going to have to start using that....

I have a workable knowledge of styling and typically if something is problematic I'll wrap it in it's own tag and then specify style rules to alleviate any issue. However, it seems that there is already a special tag for code blocks. Checkout this Stack Overflow thread for more info

https://stackoverflow.com/questions/4611591/code-vs-pre-vs-samp-for-inline-and-block-code-snippets

from elementsproject.org.

Ok, I fiddled with that, but it also puts linebreaks in ugly places, and also we seem to be generating this from Markdown so I don't know that I can change the tag it generates. Instead I just manually added linebreaks at reasonable places in the Markdown source. However, I don't know how to regenerate or push the HTML to the actual site. @martindale ?

from elementsproject.org.

(Also, note that I only changed the C++ snippets -- there's one place where a commandline is too long, but that's less natural to wrap, and I don't want people accidentally pasting only the first half. So I left it alone for now.)

from elementsproject.org.

not sure how you have the website setup, but if you're hosting it on Github then you should be able to push the a commit with the updates to the website repo and have the site show the changes instantly. Anything would be an improvement at this point, I've been using the inspect feature of chromium to get the full line of code.

There's gotta be a nice way to show the full command line without having it wrap around or have weird line breaks....

from elementsproject.org.

I've played around with this a few times now, and the most minimal change I can find that offers a safe and sane way to display the whole line is this (available in ef5911d):

pre {
  max-width: 700px;
  overflow-x: scroll;
}

If this is acceptable, I can apply the rule across the whole site for all code samples. In the future, perhaps we might even look into something like SyntaxHighlighter.

from elementsproject.org.

awesome! did you update the website with the changes? I haven't noticed anything. Also, I think I might issue a pull request to update some stuff that's a little misguiding about the guide. I figured out what problems I have been having but there's definitely a few things that could use clarification. Great work though guys thanks so much!

from elementsproject.org.

@martindale In case you were waiting on me, I say go for it. (I still don't know how to push to the live site but I assume you will?)

from elementsproject.org.