Shortcode Example.
Note
Here is an example of the note shortcode:
This one is static!
<div class="note-header">
<div class="note-icon">
<p>Note!</p>
</div>
</div>
<div class="note-content">
<p>This blog assumes basic terminal maturity</p>
</div>
This one is clickable!
<button class="note-toggle">
<div class="note-icon">
<p>Quiz!</p>
</div>
</button>
<div class="note-content" style="display: none;">
<p>The answer to the quiz!</p>
</div>
Syntax:
}
}
You can also use some HTML in the text:
<div class="note-header">
<div class="note-icon">
<p>Note!</p>
</div>
</div>
<div class="note-content">
<h1>This blog assumes basic terminal maturity</h1>
</div>
Literal shortcode:
}
Pretty cool, right?
Finally, you can do something like this (hopefully):
<button class="note-toggle">
<div class="note-icon">
<p>Quiz!</p>
</div>
</button>
<div class="note-content" style="display: block;">
<h1 id="hello-this-is-markdown-inside-a-note-shortcode">Hello this is markdown inside a note shortcode</h1>
fn main() {
println!("Hello World");
}
We can't call another shortcode inside a shortcode, but this is good enough.
</div>
Here is the raw markdown:
}
# Hello this is markdown inside a note shortcode
\`\`\`rust
fn main() {
println!("Hello World");
}
\`\`\`
We can't call another shortcode inside a shortcode, but this is good enough.
}
Finally, we have center
<div class="note-header">
<div class="note-center">
<p>Centered Text</p>
</div>
</div>
<div class="note-content">
<p>This is centered text</p>
</div>
}
It works good enough for me!