Adding custom CSS to `nb browse`

[mweichert]

Hi there!

First, thank you so much for developing nb. Although I haven't used it too much yet, my intent is to replace Obsidian with it.

I find the blue hyperlinks different to read on a black background when I use nb browse or nb show --render.

How does nb browse work exactly? Does it use pandoc under the hood? How would I go about adding a custom stylesheet?

Thanks for your help, Mike

[xwmx]

@mweichert Glad you like nb! Thanks for the pull request. I updated the implementation so there are now 4 variables:

• NB_CUSTOM_CSS
• NB_CUSTOM_CSS_URL
• NB_CUSTOM_JAVASCRIPT
• NB_CUSTOM_JAVASCRIPT_URL

NB_CUSTOM_JS and NB_CUSTOM_JS_URL are included as aliases for the NB_CUSTOM_JAVASCRIPT and NB_CUSTOM_JAVASCRIPT_URL variables.

This is included in version 7.8.0. Let me know if there are any issues with it.

[rhsev]

Can you give an example for NB_CUSTOM_CSS please? I would like to preserve line breaks in markdown shown by "nb browse". The css looks like this as far as I know:

How do I insert it here?

[xwmx]

@rhsev The markup is really minimal and I'm noticing that there isn't yet an easy way to target markdown content, so I'd recommend with the following more specific selector. You should be able to add the following line to your ~/.nbrc file, which can be opened with nb settings edit:

export NB_CUSTOM_CSS=".main p:not(.item-list) { white-space: pre-line; }"

Let me know if this works.

[rhsev]

Thank you. Unfortunately I don't get it working. I have tried some variants. I think it is a basic misunderstanding of mine, because "nb browse" uses w3m and w3m renders markdown probably without considering css. Maybe it would help to set NB_BROWSER="w3m -T" to render markdown like plain text. The solution for me is to use "nb peek" instead, which uses ranger.

[xwmx]

@rhsev Yeah, the CSS only really works in GUI browsers. What would help here would probably be the hard_line_breaks Pandoc extension. Enabling custom options for Pandoc with browse is also referenced in issue #275. I'll have to consider how to enable this.

[xwmx]

@rhsev The Markdown reader and extensions for nb browse can now be customized using the $NB_BROWSE_MARKDOWN_READER variable. To enable the hard_line_breaks extension, add the following to your ~/.nbrc file, which can be opened with nb settings edit:

export NB_BROWSE_MARKDOWN_READER="markdown+emoji+raw_html+east_asian_line_breaks+hard_line_breaks"

Let me know if you run into any issues with it!

[rhsev]

Great. Since the update to v7.12.0 today I have line breaks in markdown. Thank you for introducing the new configuration option.