Adding custom attributes using hashtags.
Project description
This plugin attempt to create inline markdown attribute using hashtags (#
) to mimic attribute list but in better.
This plugin will convert all "#contents
to **contents**{: #contents .hash}
to add custom CSS. Moreover, using a custom css file, you can also style text. The plugin will convert somes text#attribute
to somes text**{: #attribute}**
using this file as base!
↪️
#2022/01/01
will become**2022/01/01**{: #2022/01 .hash}
Installation
pip install mkdocs-custom-tags-attributes --upgrade
First, add the plugin in your mkdocs.yml
:
plugins:
- search
- custom_attributes
Note: If you have no plugin entry in your config file yet, you'll likely also want to add the search plugin. MkDocs enables it by default if there is no plugin entry set, but now you have to enable it explicitly.
You need to create an custom_attributes.css
if you want to create inline attributes!
Configuration
You can specify the css file in your mkdocs.yml
:
plugins:
- search
- custom_attributes:
file: assets/css/custom_attributes.css
Obviously, you need to update your extra css :
extra_css:
- assets/css/custom_attributes.css
Inline attributes
After this, in the css file, you can add inline attribute, automatically parsed by the plugin. Each tags must be an css id, aka prepend with #
.
#yourtags {
/* your css */
}
💭 Don't forget to escape the characters (as
\
or/
for example!)
Little example : align to right a text.
#right {
display: inline-block;
width: 100%;
text-align: right;
font-weight: normal;
}
The text :
text to left#left
Will become :
**text to left**{: #left}\n
or in html :
<p><strong id="left">text to left</strong></p>
💭 You can note that I choose to use bold to mark the inline attribute. You can remove it with
font-weight: normal;
in the css file when specify your tags.
Also, some inlines attribute can be a bit strange. First, any inline attributes placed in the end of the line will be applied on the entire paragraph.
There is a lot of possible example, so you can check the tests to saw behavior. Please, also refer to the attribute list documentation.
Stylize tags
You can also custom your inline tags (hello obsidian user!) using the .hash
class!
For example:
.hash {
background-color: honeydew;
border-radius: 5px;
}
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for mkdocs-custom-tags-attributes-0.1.2.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 6db1bcbc458decc19d13c0d1f1719b3b4abe5b4b2d913aaa7b234d9c8ce76a6d |
|
MD5 | 702d864246967ee48dc242725168f5ce |
|
BLAKE2b-256 | 1303076059a572e4c0a2004a950c4a2cd2898285df460e53b57d558fb1f04de4 |
Hashes for mkdocs_custom_tags_attributes-0.1.2-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 35b040af421883e1e39d3b9113c4a26400ff22037b87d6528248b956336847c5 |
|
MD5 | aa47c23944b877e2891895558384ca0d |
|
BLAKE2b-256 | 4e6d9f9454981d795bf08147cd434eb5c56497bc7df1341f8fa757bc9d63304f |