How to change the style of code block of pygments in ui.markdown?

[allenjiang666]

Hello,

I have a code block which I want to dispaly in ui.markdown. After I read the pygments documentation, there are several built in styles to choose. However, I am not able to find a way to specify the style in ui.markdown. Any suggestions?

Thanks

[allenjiang666]

Updates

Tried with ui.add_head_html(f'''<style>{HtmlFormatter(nobackground=False, style='murphy').get_style_defs(".codehilite")}</style>'''), by adding the style parameter in HtmlFormatter. It doesn't seem to work.

[falkoschindler]

Hi @jiangyipeng718!

There might be a problem with the markdown element overwriting the style definition. But this is working for me:

ui.add_head_html(f'<style>{HtmlFormatter(nobackground=False, style="perldoc").get_style_defs(".codehilite")}</style>')
ui.markdown('```py\nprint("Hello World!")```')

You can also add the style definition to the markdown props. This avoids conflicting definitions:

m = ui.markdown('```py\nprint("Hello World!")```')
m._props['codehilite_css'] = HtmlFormatter(nobackground=False, style='murphy').get_style_defs('.codehilite')

And note that there's a second definition for dark mode. To change both, you either need to add them both to head HTML

ui.add_head_html(f'<style>{HtmlFormatter(nobackground=False, style="perldoc").get_style_defs(".codehilite")}</style>')
ui.add_head_html(f'<style>{HtmlFormatter(nobackground=False, style="monokai").get_style_defs(".body--dark .codehilite")}</style>')

or add them both to the props dictionary:

m._props['codehilite_css'] = (
    HtmlFormatter(nobackground=False, style='murphy').get_style_defs('.codehilite') +
    HtmlFormatter(nobackground=False, style='monokai').get_style_defs('.body--dark .codehilite')
)

I guess we should provide a simpler way for changing the theme for code blocks...

[allenjiang666]

Thank you so much for being so responsive and specific. I really enjoy Nicegui. God bless you.

[xiaozhiagi]

Hello, how can I set up one click copy code?

[falkoschindler]

@txhy2018 I already answered your question #1304. No need to hijack other discussions.