Strip extra dash characters from headings
Kramdown (docs.gitlab.com
) and CommonMark(gitlab.com
) are two different Markdown engines. There are some differences with how things are rendered, but we apply our own things eventually to make them as similar as possible.
Specifically for the anchors, here's what we do:
This MR aims to bring those Markdown engines a bit closer.
You can read more information in the discussion gitlab-org/gitlab-environment-toolkit!944 (comment 1264547184), where after reading it again, I realized it's easy to implement this
Related issues
How it works
Given a heading that contains dashes:
## Heading with a dash - and backticks `vars.yml`
## Heading with a dash - and backticks `vars.yml` - and another dash
The anchor link would be the heading lowercase, spaces turned into dashes.
This is how it renders before and after this MR:
-
Before, all dashes are preserved (note the three dashes in
id
):<h2 id="heading-with-a-dash---and-backticks-varsyml">Heading with a dash - and backticks <code>vars.yml</code></h2> <h2 id="heading-with-a-dash---and-backticks-varsyml---and-another-dash">Heading with a dash - and backticks <code>vars.yml</code> - and another dash</h2>
-
After (there's only one dash):
<h2 id="heading-with-a-dash-and-backticks-varsyml">Heading with a dash - and backticks <code>vars.yml</code></h2> <h2 id="heading-with-a-dash-and-backticks-varsyml-and-another-dash">Heading with a dash - and backticks <code>vars.yml</code> - and another dash</h2>
Verify locally
Before
-
Install
gitlab_kramdown
:gem install gitlab_kramdown
-
Open an
irb
session and paste the following:require 'kramdown' require 'gitlab_kramdown' source = "## Heading with a dash - and backticks `vars.yml`" Kramdown::Document.new(source, input: 'GitlabKramdown').to_html
The anchor should have three dashes:
=> "<h2 id=\"heading-with-a-dash---and-backticks-varsyml\">Heading with a dash - and backticks <code>vars.yml</code><a href=\"#heading-with-a-dash---and-backticks-varsyml\" title=\"Permalink\" class=\"anchor\"></a></h2>\n"
After
-
Checkout this branch.
-
Build the gem and install it:
gem build gitlab_kramdown.gemspec gem install ./gitlab_kramdown-0.27.0.gem
-
Open an
irb
session and paste the following:require 'kramdown' require 'gitlab_kramdown' source = "## Heading with a dash - and backticks `vars.yml`" Kramdown::Document.new(source, input: 'GitlabKramdown').to_html
The anchor should only have one dash:
=> "<h2 id=\"heading-with-a-dash-and-backticks-varsyml\">Heading with a dash - and backticks <code>vars.yml</code><a href=\"#heading-with-a-dash-and-backticks-varsyml\" title=\"Permalink\" class=\"anchor\"></a></h2>\n"