Examples
Here is a page of examples that have been provided by users 🎉
Contributing Your Examples
You may add your own examples to this page but please do so respectfully.
- Only add new examples at the bottom of the document
- Don't break or remove others' examples
- Update the Table of Contents (TOC) with your new example
@ritchiecarroll (GridProtectionAlliance) has provided us with a snippet to add a GitHub-style link octicon next to headings. Making use of the anchorBody parameter, he is embedding an SVG of the said octicon.
Source: https://gist.github.com/ritchiecarroll/132715b38c071cbd01b1d3a0da60822a
Screenshot
CSS
h1 {
text-indent: -12px;
}
h2 {
text-indent: -10px;
}
h3 {
text-indent: -8px;
}
h4 {
text-indent: -6px;
}
h5 {
text-indent: -4px;
}
h6 {
text-indent: -2px;
}
h1 .octicon, h2 .octicon, h3 .octicon, h4 .octicon, h5 .octicon, h6 .octicon {
visibility: hidden;
}
h1:hover .octicon, h2:hover .octicon, h3:hover .octicon, h4:hover .octicon, h5:hover .octicon, h6:hover .octicon {
visibility: visible;
}
.octicon {
fill: currentColor;
padding: 0;
margin-left: -16px;
vertical-align: middle;
}Liquid
{% include anchor_headings.html html=content beforeHeading=true anchorBody="<svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>" %}