Shortcodes

Joshua Yu November 24, 2024 Updated: February 07, 2025

See below for markdown syntax used for the custom shortcodes used in this website.

Re: nesting shortcodes

The below code does not work:

{% warning(header = "warning header") %}
{{ warning_box_only(body="# nested warning!") }}
{% end %}

It will instead throw this error:

Error: Reason: Failed to render 'shortcodes/warning.html'
Error: Reason: Filter call 'markdown' failed
Error: Reason: Failed to render markdown filter: Failed to render warning_box_only shortcode

Caused by:
    0: Failed to render 'shortcodes/warning_box_only.html'
    1: Filter 'markdown' not found

Calling {{ warning_box_only(body="nested warning!") }} is essentially asking to inject html in place of the shortcode. However, if you look at warning_box_only.html:

<blockquote class="warning_box_only">
  <div class="content">
    {{ body | markdown | safe }}
  </div>
</blockquote>

it is expecting the body to be MARKDOWN, not HTML. If you remove the markdown filter from warning_box_only.html, then it will work -- but the markdown within the warning_box_only will not be rendered properly.

Custom boxes

important

{% important(header = "important header") %}
test
Press <kbd>CTRL+ALT+Delete</kbd> to end the

So it turns out you CAN put shortcodes inside other shortcodes, but it cannot be the % % with a body type.
{{ contributors(authors=["Alice Smith", "Bob Johnson"], editors=["Charlie Brown"], staff_reviewers=["David Lee"]) }}
{% end %}
important header

test Press CTRL+ALT+Delete to end the

So it turns out you CAN put shortcodes inside other shortcodes, but it cannot be the % % with a body type.

Authors: Alice Smith, Bob Johnson
Editor: Charlie Brown
Staff Reviewer: David Lee

warning

{% warning(header = "warning header") %}
This is a warning section.

Here is an attempt at the % % nested shortcode.
{% important_box_only() %}
important bx only!!!
{% end %}

{% end %}

warning header

This is a warning section.

Here is an attempt at the % % nested shortcode. {% important_box_only() %} important bx only!!!

{% end %}

question

{% question(question= "this is the question. now lets make it very long to the point where it probably needs to wrap around because its so large and fat and i hope this doesn't look bad") %}
This is the question answer
{% end %}
this is the question. now lets make it very long to the point where it probably needs to wrap around because its so large and fat and i hope this doesn't look bad
Answer:

This is the question answer

important_box_only

{% important_box_only() %}
important bx only!!!
{% end %}

important bx only!!!

warning_box_only

{% warning_box_only() %}
warning box only content
{% end %}

warning box only content

admonition

Credit to tabi for the styling. It's more pleasant colour scheme wise and it changes with the light/dark mode. Options for type/icon: note, tip, info, warning, danger, pearl, question (only the icon)

These can be mixed and matched.

{% admonition(type="danger", icon="danger", title="Warning DANGER") %}
This is a danger admonition with a danger icon.

**Markdown can be used here :)**
{% end %}
DANGER

This is a danger admonition with a danger icon.

Markdown can be used here :)

WARNING

Blah blah here is a wall of text wall of text Blah blah here is a wall of text wall of text Blah blah here is a wall of text wall of text Blah blah here is a wall of text wall of text

INFO

BLah blah

TIP

Blah blah

NOTE

blah blah

question icon

blah blah

We also have the elusive pearl mode:

{% admonition(type="pearl", icon="pearl", title="PEARL") %}
Insert sage clinical pearl
{% end %}
PEARL

Insert sage clinical pearl

text_image

Of note; you cannot nest a shortcode easily within a shortcode. Ie. I could not use {{ shortcode }} within the text image to right text.

{% text_image(src="/images/example.jpg", alt="An image description", caption = "test caption") %}
_Here is some text_ on the left.</br><kbd>CTRL+ALT+Delete</kbd>
{% end %}

Here is some text on the left.
CTRL+ALT+Delete

An image description

test caption

{% text_image(text_position = "right", src="/images/example.jpg", alt="An image description", caption = "test caption") %}
_Here is some text_ on the right.</br><kbd>CTRL+ALT+Delete</kbd>
{% end %}

Here is some text on the right.
CTRL+ALT+Delete

An image description

test caption

two_columns

{% two_columns() %}
Left column text goes here.

### Markdown should be supported

<!-- split -->

Right column text goes here.
{% end %}

Left column text goes here.

Markdown should be supported

Right column text goes here.

two_columns_fancy

{% two_columns_fancy() %}
Left column text goes here.

### Markdown should be supported

<!-- split -->

Right column text goes here.
{% end %}

Left column text goes here.

Markdown should be supported

Right column text goes here.

spoiler

this is a spoiler that you can click: {{ spoiler(text="text to hide", fixed_blur=false) }}

this is a spoiler that you can click:

You can also use it like so (fixed_blur = true means you can't see it ever):

{% spoiler(fixed_blur = true) %}
testing this
{% end %}

contributors

{{ contributors(authors=["Alice Smith", "Bob Johnson"], editors=["Charlie Brown"], staff_reviewers=["David Lee"]) }}
Authors: Alice Smith, Bob Johnson
Editor: Charlie Brown
Staff Reviewer: David Lee

timeline

Adapted from the excellent pico theme.

{% timeline() %}
[{
"title":"Lorem Ipsum Event",
"body":"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
"date":"Jul-2023"
},
{
"title":"Lorem Ipsum event 2",
"body":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
"date":"Jun-2022"
}]
{% end %}
  • Lorem Ipsum Event

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

  • Lorem Ipsum event 2

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

mermaid

{% mermaid() %}
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
{% end %}
sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you?

Other examples of mermaid charts (taken from their docs):

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid excludes weekends %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :until isadded Functionality added :milestone, isadded, 2014-01-25, 0d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h

widget_penfast

{{ widget_penfast() }}

PEN-FAST

F - Five years or less since reaction
A - Anaphylaxis or angioedema
S - Severe cutaneous adverse reaction
T - Treatment recieved for reaction (or unsure)

CALCULATED RISK:

wide_contact_card

{{ wide_contact_card(title="example title", text = "test text", src="/images/example.jpg", url="/research/") }}
{{ card_grid() }}

profile_grid

{{profile_grid()}}
title 1

title 1

placeholder

title 2

title 2

placeholder

title 3

title 3

placeholder

custom_macro

{% custom_macro() %}
Here is a custom macro copy paste section
{% end %}
Here is a custom macro copy paste section

load_macro

{{ load_macro(topic_name = "_xample_topic") }}
# CHFe O2, UO Likely precipitant(s): diet, med, CAD, arrhythmia, infection, PE, AKI, substance This is a very long line to demonstrate that the block should have wrap around text and should not just get cut off hopefully. Ix: trop, ECG, BNP, metabolic profile, TSH, Cr, liver panel CXR ?cath Mx: NP vs BiPAP IV Lasix I&O, upright, salt/fluid restrict GDMT when out of CHFe

medications_toml_load

param: meds (list of str) if not provided default will show all medications from the toml

{{ medications_toml_load(meds=["bilastine"])}}

Bilastine

Brand Names: Blexten

Cost: ~$1 CAD / 20mg tab (ON)

MoA: 2nd generation H1 antagonist.

Half-life: ~15 hours

Routes: PO tab, liquid (uncommon)

Doses:

  • CSU, AR: 20mg PO OD to QID (adult dosing)
  • CSU, AR: 10mg PO OD to QID (pediatric dosing)

Age Group: >=12 years of age; has been used off-label in younger children

Pregnancy: Avoid (not enough data)

Contraindications: Hypersensitivity, QT prolongation or history of torsades

Common SEs: QT prolongation; drowsiness (4%); headache (4%). For reference, drowisness/headache had a 2% incidence rate in placebo arm

Severe SEs: Torsades (very rare)

Monograph Links:

Pearls

  • Theoretically does not cross BBB

example_colormode

This is a test

kbd

<kbd><kbd><kbd>This is a demonstration of the possible shortcodes that can be used. Review shortcodes.md to see how each shortcode is used within the .md documents.</kbd></kbd></kbd>

This is a demonstration of the possible shortcodes that can be used. Review shortcodes.md to see how each shortcode is used within the .md documents.

test_toml_load

{{ test_toml_load(section_name = "label_1") }}

Value for A

Value for A
Value for B
Value for C

Now we will try to do multiple tomls

Value for A

Value for A
Value for B
Value for C
  

label 2 data

label 2 data
Value for B2
Value for C2
  

label 3 data

label 3 data
Value for B3
Value for C3
  

wip

{{ wip() }}

This page is a work in progress. If you want to help contribute, see below :)

Contribute

remote_text

{{ remote_text(src="https://raw.githubusercontent.com/jay-joshy/allergyguide/refs/heads/main/TODO.md") }}
Content:

- Make example articles for 1) a condition (ie. penicillin allergy) 2) macro 3) research
- Pediatric medicine crash course
- port original pen-fast questions over with extra options
- add non-ige mediated mast cell degranulation section (with specific sections with things like IV iron, NAC, alcohol, opioids, etc)
- sections for pdfs for not only patient handouts but how to use inhalers, etc.
- Billing tips (would have to be province specific -- VERY fellow focused and low priority)

Organizational:

- fully flesh out contribution process
- set up example google drive
- opinion from staff -- UBC, Western, McMaster?
- other resident / fellow support / thoughts?

Shortcodes:

- consolidate and make dark/light themes for your boxes, particularly the question box (which does not look good on mobile)

Other stylistic:

- fix / make custom banner.png for the site
- Decide on design of home page
- Add author pictures to about

example

proof of concept that 1) you can load in simple arrays and 2) use tera macros

{{ example(a = ["test1", "test2"], n = 10) }}
Test1
Test2
10 - 9 - 8 - 7 - 6 - 5 - 4 - 3 - 2 - 1

references

This sentence needs two references <span class="references">1,2,3,1,1,1</span> and some of this

Here is another sentence with one reference <span class="references">2</span>

... rest of the document content

{% references() %}
[{
"id": "1",
"aha_bib": "Netting MJ, Campbell DE, Koplin JJ, et al. An Australian Consensus on Infant Feeding Guidelines to Prevent Food Allergy: Outcomes From the Australian Infant Feeding Summit. Journal of Allergy and Clinical Immunology: In Practice. 2017;5(6):1617-1624. doi:10.1016/j.jaip.2017.03.013",
"url": "https://pubmed.ncbi.nlm.nih.gov/28499774/",
"notes": ""
}, {
"id": "2",
"aha_bib": "Khan DA, Banerji A, Blumenthal KG, et al. Drug allergy: A 2022 practice parameter update. Journal of Allergy and Clinical Immunology. 2022;150(6):1333-1393. doi:10.1016/j.jaci.2022.08.028",
"url": "https://www.jacionline.org/article/S0091-6749(22)01186-1/fulltext",
"notes": "This study was good!"
}, {
"id": "3",
"aha_bib": "Another reference here with its own details.",
"url": "https://example.com",
"notes": ""
}]
{% end %}

This sentence needs two references 1,2,3,1,1,1 and some of this

Here is another sentence with one reference 2

... rest of the document content

×