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

Table of Contents

• GitHub-style Octicon Links

GitHub-style Octicon Links

@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>" %}