Skip to content

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

  1. Install gitlab_kramdown:

    gem install gitlab_kramdown
  2. 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

  1. Checkout this branch.

  2. Build the gem and install it:

    gem build gitlab_kramdown.gemspec
    gem install ./gitlab_kramdown-0.27.0.gem
  3. 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"
Edited by Achilleas Pipinellis

Merge request reports