You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Sometimes it's useful for authors to put a button on a page to draw more attention to it. For example, a "Get started" button on a documentation landing page, or a "Donate" button to direct users to a donation page.
Currently the closest thing you can get is manually defining an HTML element like:
<ahref="/start"><divstyle="border-radius: 1em; background-color: #e07330; width: 8em; height: 3em; margin: .5em auto; color: white;">
Get started
</div></a>
However this has a few shortcomings:
It is verbose and depends on enough CSS knowledge to hand-write the rules.
style works with <div> but not with <a> so you can't style the text inside the button.
It would be much easier if we either:
Supported native button syntax, like:
:::{button} Button text
:style: some ways to style the button, center it, etc
:::
This adds a tutorial for creating basic plugins with Jupyter Book. It
covers creating and registering plugins, creating a directive, and
creating a transform.
It also cleans up some navigation and adds two how-tos related to
plugins.
This is a result of some self-learning I had to do in creating some
plugins for my website, so hopefully this makes things easier to learn
for future readers!
### Follow ups
A few things I opened along the way:
- jupyter-book/mystmd#1651
- jupyter-book/mystmd#1649
- jupyter-book/mystmd#1652
- jupyter-book/mystmd#1654
- jupyter-book/mystmd#1655
---------
Co-authored-by: Angus Hollands <[email protected]>
The main complexity that we'd run into was expressing buttons as a {role} but without the ability to define classes etc.
I believe that we decided to just move forward with an MVP approach, to add functionality to support xref links via the button link, and to leave things like styling etc to future improvements.
Sometimes it's useful for authors to put a button on a page to draw more attention to it. For example, a "Get started" button on a documentation landing page, or a "Donate" button to direct users to a donation page.
Currently the closest thing you can get is manually defining an HTML element like:
However this has a few shortcomings:
<div>
but not with<a>
so you can't style the text inside the button.It would be much easier if we either:
Supported native button syntax, like:
Fixed Load tailwind CSS classes when they are used within directives and page content #1617 so that you could style the
<div>
as you wished with classes from tailwind (and make this work for<a>
as well)The text was updated successfully, but these errors were encountered: