added beginnings of callout icon support

This commit is contained in:
Amy G. Bowersox 2024-08-11 01:01:38 -06:00
parent 1a92e7aa97
commit 18f5f36072
3 changed files with 21 additions and 1 deletions

View File

@ -865,6 +865,11 @@ class ObsidianStyleBlockquotes(Extension):
class ObsidianBlockQuote(BlockQuoteProcessor): class ObsidianBlockQuote(BlockQuoteProcessor):
CALLOUT = re.compile(r'^\[!([a-z]+)\]([-+])?(?:[ ]+(.*))?') CALLOUT = re.compile(r'^\[!([a-z]+)\]([-+])?(?:[ ]+(.*))?')
CALLOUT_DEFICON = 'pencil'
CALLOUT_ICONS = {
'info': 'info',
'tip': 'flame'
}
def normal_blockquote(self, parent: etree.Element, block: str) -> None: def normal_blockquote(self, parent: etree.Element, block: str) -> None:
sibling = self.lastChild(parent) sibling = self.lastChild(parent)
@ -889,7 +894,9 @@ class ObsidianStyleBlockquotes(Extension):
title = callout_type.title() title = callout_type.title()
base_div = etree.SubElement(parent, 'div', {'class': 'callout', 'data-callout': callout_type}) base_div = etree.SubElement(parent, 'div', {'class': 'callout', 'data-callout': callout_type})
title_div = etree.SubElement(base_div, 'div', {'class': 'callout-title'}) title_div = etree.SubElement(base_div, 'div', {'class': 'callout-title'})
# TODO: add title icon here icon_div = etree.SubElement(title_div, 'div', {'class': 'callout-icon'})
etree.SubElement(icon_div, 'span',
{'data-lucide': self.CALLOUT_ICONS.get(callout_type, self.CALLOUT_DEFICON)})
inner_title_div = etree.SubElement(title_div, 'div', {'class': 'callout-title-inner'}) inner_title_div = etree.SubElement(title_div, 'div', {'class': 'callout-title-inner'})
inner_title_div.text = title inner_title_div.text = title
lines.pop(0) lines.pop(0)

View File

@ -81,6 +81,11 @@ th {
line-height: 1.3; line-height: 1.3;
align-items: flex-start; align-items: flex-start;
} }
.callout-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.callout-title-inner { .callout-title-inner {
font-weight: 600; font-weight: 600;
color: inherit; color: inherit;
@ -91,6 +96,10 @@ th {
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;
} }
.lucide {
width: 1em;
height: 1em;
}
/* Following are styles generated by Pygments "tango" style */ /* Following are styles generated by Pygments "tango" style */
pre { line-height: 125%; } pre { line-height: 125%; }

View File

@ -33,6 +33,10 @@ DEFAULT_TEMPLATE = """<html>
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
<script src="https://unpkg.com/lucide@latest"></script>
<script>
lucide.createIcons();
</script>
</body> </body>
</html> </html>
""" """