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

Document css classes, ids etc for the html generated by.markdown #282

Closed
backspaces opened this issue Mar 18, 2024 · 5 comments
Closed

Document css classes, ids etc for the html generated by.markdown #282

backspaces opened this issue Mar 18, 2024 · 5 comments

Comments

@backspaces
Copy link

backspaces commented Mar 18, 2024

Is your feature request related to a problem? Please describe.

I need to style the html produced by markdown. This is a documentation request.

Describe the solution you'd like

When markdown is converted to html, I need to style it. For example, if I have `console.log()` in my markdown, I'd like to set it's color via css.

Describe alternatives you've considered

Looking at the generated html and try to figure out how to create css for styling it.

Additional context

As an example, look the first paragraph of https://code.agentscript.org/docs/tutorial-3%20-%20Browser.html#browser's-developer-console
It has "It also provides a handy console.log() function". I'd like the back-ticked console.log() to be highlighted.

Thanks for the help!

@ankitskvmdam
Copy link
Owner

All instances of text enclosed in backticks are rendered as <code> blocks. To modify the appearance of these code blocks, you can follow these steps:

"theme_opts": {
    "create_style": ".light .readme p > code { background: red } .dark .readme p > code { background: blue}",
}

Note: This will only update the appearance of code blocks in homepage. Not on other pages.

This code snippet introduces a style definition that alters the background color of all code blocks (indicated by backticks) to red when the theme is light, and blue when the theme is dark. Refer to this link for more details.

Alternatively, you can create a custom CSS file containing the aforementioned CSS rules and include it as described here.

@backspaces
Copy link
Author

backspaces commented Mar 20, 2024

Will this work for both single ticks (inline) and triple ticks (block)? I want to limit it to single, inline ticks. Thanks again!

@ankitskvmdam
Copy link
Owner

ankitskvmdam commented Mar 21, 2024

It will only update inline code block. To select all triple ticks the code blocks: .light .readme pre code table.

@ankitskvmdam
Copy link
Owner

@backspaces is the issue resolved?

@backspaces
Copy link
Author

I think so, lets close it and reopen if needed. Thanks!!

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

No branches or pull requests

2 participants