Inline Links
Links, including inline links, have two parts:
- linking text
- link url
Kramdown offers minimal syntax for combining both in one string:
[linking tex](link url)
E.g. Within [] you can still use text attributes such as italic or underlined words to style your text. Here below how it looks your syntax with an anchor link included or with an url.
E.g.
Within [] you can still use [*text* <u>attributes</u>](#text-attributes) such as italic or underlined words to style your text. Here how it looks your syntax with an [anchor link](#anchor-links) included or with an url.
Learn more from [Kramdown documentation](https://kramdown.gettalong.org/syntax.html#ordered-and-unordered-lists).
Learn more from Kramdown documentation.
Anchor Links
To include anchor links to your pages, articles and posts you need to:
-
add an
idto your headers -
add an
idto any paragraph of a text you like to link to
Headers-ID
Kramdown supports Header IDs:
## YourHeader {#YourID}
e.g. ## Anchor Links {#anchorlinks}
To direct your link to a header, use the usual markdown syntax for links – []():
- With only
(#YourID)when linking to a header-id within the same page: e.g. Linking text to my Header Anchor Links
With only ```#YourID``` when linking to a header-id within the same page:
e.g. [Linking text to my paragraph Anchor Links](#anchor-links)
- With the path-to-the-folder (or the permalink) of the page/article/post where your header-id is located –
(path-to-the-folder or permalink/#YourID)– when linking to a header-id on a different page: e.g. Linking text to my Header Anchor Links
With the path-to-the-folder (or the permalink) of the page/article/post where your header-id is located -- ```(path-to-the-folder or permalink/#YourID)``` -- when linking to a header-id on a different page:
e.g. [Linking text to my Header Anchor Links](/text-formatting/#anchor-links)
It is good practice to include IDs to your headers, especially those introducing to key or recurrent topics, in order to make easier direct links to specific sections of your site.
Paragraphs-ID
You have to use <a id> immediately before ` the paragraph you like to link to:
<a id="YourID"></a>
YourParagraph with YourText
whilst the proper anchor link works with the usual markdown syntax []().
When linking to a paragraph-id within the same page:
[Your Text with a link](#YourParagraph-ID)
but when linking to a header-id on a different page:
[Your Text with a link](/path-to-the-folder or permalink/#YourParagraph-ID)
E.g. Let’s say I want to link straight to my above list with the two anchor link options:
Here it is my paragraph in kramdown:
<a id="anchor-links-options"></a>
* add an `id` to your headers
* add an `id` to any paragraph of a text
And here it is a sample text linking to my paragraph: See above anchor link options
[See above anchor link options](#anchor-links-options)
Buttons
To include a Button linking to a page/article/post or a different website, you need to type:
<div markdown="0"><a href="https://carlocorsato.github.io/simply-academia-test/path-to-the-folder / or the url of a website" class="btn2">Text to display on the button</a></div>
E.g. A button to learn more about Kramdown syntax:
<div markdown="0"><a href="https://kramdown.gettalong.org/documentation.html" class="btn2">Learn more about Kramdown</a></div>
<div markdown="0"><a href="https://kramdown.gettalong.org/documentation.html" class="btn">Learn more about Kramdown</a></div>
To include a transparent button (turning to black when hovering) you will apply class="btn2", whilst to get the opposite colour mix type in class="btn".
Note: Previous/Next buttons are automatically generated at the bottom of each article/post.