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

Improving Markdown code highlighting #2561

Closed
Faur opened this issue Jun 8, 2017 · 11 comments
Closed

Improving Markdown code highlighting #2561

Faur opened this issue Jun 8, 2017 · 11 comments

Comments

@Faur
Copy link

Faur commented Jun 8, 2017

The Markdown code highlight (when you use `) is not very clear. Would it be possible to make the code stand out more, perhaps similar to the gray boxes you get on Stack Exchange?

Jupyter as it is right now:
image


Example of clearer code highlighting (from Stack Exchange)
image

@takluyver
Copy link
Member

Sounds reasonable to me. This should be something a new contributor could have a go at.

http://jupyter-notebook.readthedocs.io/en/latest/contributing.html

@vidriduch
Copy link
Contributor

Hi, I'm new contributor and I tried to address this issue in #2571. It should add a gray background under a single ` in the text. Bigger block of code (surrounded by ```) should be formatted as before with white background. I believe that should resemble the Stack Exchange style of formatting. Please, do let me know what do you think.

@takluyver
Copy link
Member

BTW, with visual changes it's a good idea to provide a screenshot of what it looks like (even better: before and after comparison).

@vidriduch
Copy link
Contributor

Sorry, I added images of before and after comparison to the commit message.

@takluyver
Copy link
Member

Can I be picky and ask for an after image from Jupyter, rather than (or as well as) the 'this is what I'm after' from Stackoverflow? See the instructions here if you've not yet rebuilt the CSS with your changes.

@vidriduch
Copy link
Contributor

Sorry again, the previous images where taken from Jupyter I just trimmed the important part. I changed them so now images show the entire notebook. If I misunderstood something please do let me know.

@takluyver
Copy link
Member

Ah, sorry, I was mistakenly looking at the images on this issue instead of the images on your PR. Yes, those look fine. Maybe you want to add a couple of pixels of padding so the grey box is a little bit bigger?

@vidriduch
Copy link
Contributor

vidriduch commented Jun 12, 2017

Good idea, I added 1px padding from top and bottom and 5px from left and right to again resemble Stack Exchanges formatting. I also updated after image in my PR.

@Faur
Copy link
Author

Faur commented Jun 13, 2017

@vidriduch I think the results look really good now. Thanks for the quick work.

Is it correctly understood that this change will ship with 5.1, or will is it likely that it will be included in an earlier release?

@minrk
Copy link
Member

minrk commented Jun 14, 2017

This should be in 5.1, which is likely to be the next release, so there will likely not be an earlier one.

@gnestor
Copy link
Contributor

gnestor commented Jul 24, 2017

Closing this as it appears it was resolved by #2571 👍

@gnestor gnestor closed this as completed Jul 24, 2017
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 15, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants