Which symbols are available for permalinks ?

[TRaSH-]

Which symbols are available for permalinks ?

I'm actually looking for the option to use a chain like here

[facelessuser]

Any symbols you want are available assuming you provide the font that contains them. In the case of Pymdown-Extensions, I actually don't use symbols but use SVG images instead: https://github.com/facelessuser/pymdown-extensions/blob/master/docs/src/scss/extensions/_toc.scss. I set the symbol to nothing, and then target it with CSS to add a background image. When I build my CSS, the SVG is embedded in the CSS. So there is a bit of complexity involved as to how I do it, but you don't have to do all of that.

An easier approach is to provide some CSS that includes a font (with symbols) that you prefer, and then provide the appropriate character code in the TOC extension for permalinks.

[TRaSH-]

okay, thnx

I will do some searching if i can find something that would work.

[rwoldu]

hi @TRaSH- have you found something else that worked for you?

[TRaSH-]

I think I managed it the following way.

mkdocs.yml

extra_css:
  - stylesheets/extra.css
  - stylesheets/github-permalink-style.css
  
    - toc:
      permalink: ""

github-permalink-style.css

.headerlink {
--permalink-size: 20px; /* for font-relative sizes, 0.6em is a good choice */
--permalink-spacing: 4px;

width: calc(var(--permalink-size) + var(--permalink-spacing));
height: var(--permalink-size);
vertical-align: middle;
background-color: var(--md-default-fg-color--lighter);
background-size: var(--permalink-size);
mask-size: var(--permalink-size);
-webkit-mask-size: var(--permalink-size);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
visibility: visible;
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" 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>');
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" 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>');
}

[id]:target .headerlink {
background-color: var(--md-typeset-a-color);
}

.headerlink:hover {
background-color: var(--md-accent-fg-color) !important;
}

@media screen and (min-width: 76.25em) {
h1,
h2,
h3,
h4,
h5,
h6 {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.headerlink {
  order: -1;
  margin-left: calc(
    var(--permalink-size) * -1 - var(--permalink-spacing)
  ) !important;
}
}

[rwoldu]

Thanks a lot for your input 🚀 !! will try it out