Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Code on create Sidechain not justified. #29

Open
Alex-Keyes opened this issue Aug 23, 2016 · 8 comments
Open

Code on create Sidechain not justified. #29

Alex-Keyes opened this issue Aug 23, 2016 · 8 comments

Comments

@Alex-Keyes
Copy link
Contributor

The code on this page, defining the vars to create a sidechain isn't justified to be readable. It runs completely off to the side of the page. This can be fixed using a simple div tag or the like.

@gwillen
Copy link
Contributor

gwillen commented Aug 23, 2016

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.

@Alex-Keyes
Copy link
Contributor Author

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

@gwillen
Copy link
Contributor

gwillen commented Aug 24, 2016

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 ?

@gwillen
Copy link
Contributor

gwillen commented Aug 24, 2016

(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.)

@Alex-Keyes
Copy link
Contributor Author

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....

@martindale
Copy link
Contributor

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.

@Alex-Keyes
Copy link
Contributor Author

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!

@gwillen
Copy link
Contributor

gwillen commented Aug 30, 2016

@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?)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants