handled basic display of folded and non-folded callouts, without the active bits
This commit is contained in:
parent
18f5f36072
commit
dd01597ac5
|
@ -867,7 +867,10 @@ class ObsidianStyleBlockquotes(Extension):
|
||||||
CALLOUT = re.compile(r'^\[!([a-z]+)\]([-+])?(?:[ ]+(.*))?')
|
CALLOUT = re.compile(r'^\[!([a-z]+)\]([-+])?(?:[ ]+(.*))?')
|
||||||
CALLOUT_DEFICON = 'pencil'
|
CALLOUT_DEFICON = 'pencil'
|
||||||
CALLOUT_ICONS = {
|
CALLOUT_ICONS = {
|
||||||
|
'faq': 'circle-help',
|
||||||
|
'help': 'circle-help',
|
||||||
'info': 'info',
|
'info': 'info',
|
||||||
|
'question': 'circle-help',
|
||||||
'tip': 'flame'
|
'tip': 'flame'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -888,20 +891,35 @@ class ObsidianStyleBlockquotes(Extension):
|
||||||
def callout_block(self, parent: etree.Element, lines: list[str]) -> None:
|
def callout_block(self, parent: etree.Element, lines: list[str]) -> None:
|
||||||
m = self.CALLOUT.match(lines[0])
|
m = self.CALLOUT.match(lines[0])
|
||||||
callout_type = m.group(1)
|
callout_type = m.group(1)
|
||||||
# folding = m.group(2)
|
folding = m.group(2)
|
||||||
title = m.group(3)
|
title = m.group(3)
|
||||||
if not title:
|
if not title:
|
||||||
title = callout_type.title()
|
title = callout_type.title()
|
||||||
base_div = etree.SubElement(parent, 'div', {'class': 'callout', 'data-callout': callout_type})
|
baseclass = 'callout'
|
||||||
|
if folding:
|
||||||
|
baseclass = f"{baseclass} is-collapsible"
|
||||||
|
if folding == '-':
|
||||||
|
baseclass = f"{baseclass} is-collapsed"
|
||||||
|
base_div = etree.SubElement(parent, 'div', {'class': baseclass, 'data-callout': callout_type})
|
||||||
title_div = etree.SubElement(base_div, 'div', {'class': 'callout-title'})
|
title_div = etree.SubElement(base_div, 'div', {'class': 'callout-title'})
|
||||||
icon_div = etree.SubElement(title_div, 'div', {'class': 'callout-icon'})
|
icon_div = etree.SubElement(title_div, 'div', {'class': 'callout-icon'})
|
||||||
etree.SubElement(icon_div, 'span',
|
etree.SubElement(icon_div, 'span',
|
||||||
{'data-lucide': self.CALLOUT_ICONS.get(callout_type, self.CALLOUT_DEFICON)})
|
{'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
|
||||||
|
if folding:
|
||||||
|
baseclass = 'callout-fold'
|
||||||
|
if folding == '-':
|
||||||
|
baseclass = f"{baseclass} is-collapsed"
|
||||||
|
fold_div = etree.SubElement(title_div, 'div', {'class': baseclass})
|
||||||
|
etree.SubElement(fold_div, 'span',
|
||||||
|
{'data-lucide': 'chevron-right' if folding == '-' else 'chevron-down'})
|
||||||
lines.pop(0)
|
lines.pop(0)
|
||||||
if len(lines) > 0:
|
if len(lines) > 0:
|
||||||
content_div = etree.SubElement(base_div, 'div', {'class': 'callout-content'})
|
content_div = etree.SubElement(base_div, 'div', {'class': 'callout-content'})
|
||||||
|
if folding:
|
||||||
|
styleval = 'display: none;' if folding == '-' else ''
|
||||||
|
content_div.attrib['style'] = styleval
|
||||||
first = True
|
first = True
|
||||||
for line in lines:
|
for line in lines:
|
||||||
if first:
|
if first:
|
||||||
|
|
|
@ -52,7 +52,6 @@ th {
|
||||||
}
|
}
|
||||||
.callout {
|
.callout {
|
||||||
--callout-color: 8, 109, 221;
|
--callout-color: 8, 109, 221;
|
||||||
--callout-icon: lucide-pencil;
|
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
@ -64,13 +63,14 @@ th {
|
||||||
background-color: rgba(var(--callout-color), 0.1);
|
background-color: rgba(var(--callout-color), 0.1);
|
||||||
padding: 12px 12px 12px 24px;
|
padding: 12px 12px 12px 24px;
|
||||||
}
|
}
|
||||||
|
.callout[data-callout="question"], .callout[data-callout="help"], .callout[data-callout="faq"] {
|
||||||
|
--callout-color: 236, 117, 0;
|
||||||
|
}
|
||||||
.callout[data-callout="info"] {
|
.callout[data-callout="info"] {
|
||||||
--callout-color: 8, 109, 221;
|
--callout-color: 8, 109, 221;
|
||||||
--callout-icon: lucide-info;
|
|
||||||
}
|
}
|
||||||
.callout[data-callout="tip"] {
|
.callout[data-callout="tip"] {
|
||||||
--callout-color: 0, 191, 188;
|
--callout-color: 0, 191, 188;
|
||||||
--callout-icon: lucide-flame;
|
|
||||||
}
|
}
|
||||||
.callout-title {
|
.callout-title {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user