Wiki TOC isn't rendering

@DouweM could you take a look at this please?

@sammcj Could you let me know what format you are using for that first page (Markdown, RDoc or AsciiDoc), and could you post the raw source of that page? That should help me narrow down where this issue originates.

Thanks!

@DouweM Thanks for looking into this.

We're using Markdown.

So when I create a page with:

[[_TOC_]]

# Bla
## bla bla

# bla

## bla
## bla

Page source:

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta content='GitLab Enterprise Edition' name='description'>
<title>
Wiki - Systems / docs | 
GitLab
</title>
<link href="/assets/favicon-baaa14bade1248aa6165e9d34e7d83c0.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href="/assets/application-a10f8c341a93a5f34065b53679298172.css" media="all" rel="stylesheet" />
<link href="/assets/print-1df3ea9b8ff148a6745321899e0cb213.css" media="print" rel="stylesheet" />
<script src="/assets/application-f97c03b04803fcb8966eb8f5d2fb0b25.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="NbTYBjTmyLzatQ2xHaS8o0bjsFVfm1u9eP8mZeYVMQE=" name="csrf-token" />
<script type="text/javascript">
//<![CDATA[
window.gon={};gon.default_issues_tracker="gitlab";gon.api_version="v3";gon.relative_url_root="";gon.default_avatar_url="https://gitlab.office.infoxchange.net.au/assets/no_avatar-3656d6f42d5007925a0cfb4b1e3bb1f1.png";gon.current_user_id=2;gon.api_token="hxeev83QqLkGhz1gCjtb";
//]]>
</script>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'>
<meta content='#474D57' name='theme-color'>


</head>

<body class='ui_gray dark_theme project' data-page='projects:wikis:show' data-project-id='104'>
<header class='navbar navbar-fixed-top navbar-gitlab'>
<div class='navbar-inner'>
<div class='container'>
<div class='app_logo'>
<style>
.dark_theme .app_logo a h1 {background: url('/uploads/appearance/light_logo/1/ixdark.png') no-repeat center center !important; }
.light_theme .app_logo a h1 {background: url('/uploads/appearance/dark_logo/1/IXAsymbol.png') no-repeat center center !important; }
</style>
<a class="home has_bottom_tooltip" href="/" title="Dashboard"><h1>GITLAB</h1>
</a></div>
<h1 class='title'><span><a href="/groups/systems">Systems</a> / <a href="/systems/docs">docs</a></span></h1>
<button class='navbar-toggle' data-target='.navbar-collapse' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<i class='fa fa-bars'></i>
</button>
<div class='navbar-collapse collapse'>
<ul class='nav navbar-nav'>
<li class='hidden-sm hidden-xs'>
<div class='search'>
<form accept-charset="UTF-8" action="/search" class="navbar-form pull-left" method="get"><div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /></div>
<input class="search-input" id="search" name="search" placeholder="Search in this project" type="search" />
<input id="group_id" name="group_id" type="hidden" />
<input id="project_id" name="project_id" type="hidden" value="104" />
<input id="scope" name="scope" type="hidden" value="wiki_blobs" />
<input id="repository_ref" name="repository_ref" type="hidden" />

<div class='search-autocomplete-opts hide' data-autocomplete-path='/search/autocomplete' data-autocomplete-project-id='104'></div>
</form>

</div>
<script>
  $('.search-input').on('keyup', function(e) {
    if (e.keyCode == 27) {
      $('.search-input').blur()
    }
  })
</script>

</li>
<li class='visible-sm visible-xs'>
<a class="has_bottom_tooltip" data-original-title="Search area" href="/search" title="Search"><i class='fa fa-search'></i>
</a></li>
<li>
<a class="has_bottom_tooltip" data-original-title="Help" href="/help" title="Help"><i class='fa fa-question-circle'></i>
</a></li>
<li>
<a class="has_bottom_tooltip" data-original-title="Public area" href="/explore" title="Explore"><i class='fa fa-globe'></i>
</a></li>
<li>
<a class="has_bottom_tooltip" data-original-title="My snippets" href="/s/samm" title="My snippets"><i class='fa fa-clipboard'></i>
</a></li>
<li>
<a class="has_bottom_tooltip" data-original-title="Admin area" href="/admin" title="Admin area"><i class='fa fa-cogs'></i>
</a></li>
<li>
<a class="has_bottom_tooltip" data-original-title="New project" href="/projects/new" title="New project"><i class='fa fa-plus'></i>
</a></li>
<li>
<a class="has_bottom_tooltip" data-original-title="Profile settings&quot;" href="/profile" title="Profile settings"><i class='fa fa-user'></i>
</a></li>
<li>
<a class="has_bottom_tooltip" data-method="delete" data-original-title="Logout" href="/users/sign_out" rel="nofollow" title="Logout"><i class='fa fa-sign-out'></i>
</a></li>
<li class='hidden-xs'>
<a class="profile-pic" href="/u/samm" id="profile-pic"><img alt="User activity" src="https://secure.gravatar.com/avatar/ec7776bb2226b01d2add1787d2559ae2?s=60&amp;d=identicon" />
</a></li>
</ul>
</div>
</div>
</div>
</header>


<script>
  GitLab.GfmAutoComplete.dataSource = "/systems/docs/autocomplete_sources?type=NilClass&type_id=Testingtoc"
  GitLab.GfmAutoComplete.setup();
</script>

<div class='page-sidebar-expanded page-with-sidebar'>

<div class='sidebar-wrapper'>
<ul class='project-navigation nav nav-sidebar'>
<li class="home"><a class="shortcuts-project" href="/systems/docs" title="Project"><i class='fa fa-dashboard'></i>
<span>
Project
</span>
</a></li><li class=""><a class="shortcuts-tree" href="/systems/docs/tree/master" title="Files"><i class='fa fa-files-o'></i>
<span>
Files
</span>
</a></li><li class=""><a class="shortcuts-commits" href="/systems/docs/commits/master" title="Commits"><i class='fa fa-history'></i>
<span>
Commits
</span>
</a></li><li class=""><a class="shortcuts-network" href="/systems/docs/network/master" title="Network"><i class='fa fa-code-fork'></i>
<span>
Network
</span>
</a></li><li class=""><a class="shortcuts-graphs" href="/systems/docs/graphs/master" title="Graphs"><i class='fa fa-area-chart'></i>
<span>
Graphs
</span>
</a></li><li class=""><a class="shortcuts-issues" href="https://redmine.office.infoxchange.net.au/projects/systems" title="Issues"><i class='fa fa-exclamation-circle'></i>
<span>
Issues
</span>
</a></li><li class=""><a class="shortcuts-merge_requests" href="/systems/docs/merge_requests" title="Merge Requests"><i class='fa fa-tasks'></i>
<span>
Merge Requests
<span class='count merge_counter'>0</span>
</span>
</a></li><li class="active"><a class="shortcuts-wiki" href="/systems/docs/wikis/home" title="Wiki"><i class='fa fa-book'></i>
<span>
Wiki
</span>
</a></li><li class="separate-item"><a class="stat-tab tab no-highlight" href="/systems/docs/edit" title="Settings"><i class='fa fa-cogs'></i>
<span>
Settings
<i class='fa fa-angle-down'></i>
</span>
</a></li></ul>

<div class='collapse-nav'>
<a class="toggle-nav-collapse" href="#"><i class="fa fa-angle-left"></i></a>

</div>
</div>
<div class='content-wrapper'>
<div class='container-fluid'>
<div class='content'>
<div class='flash-container'>
</div>

<div class='clearfix'>
<ul class='nav nav-tabs'>
<li class=""><a href="/systems/docs/wikis/home">Home</a>
</li><li class=""><a href="/systems/docs/wikis/pages">Pages</a>
</li><li class=""><a href="/systems/docs/wikis/git_access"><i class='fa fa-download'></i>
Git Access
</a></li><div class='pull-right'>
<a class="add-new-wiki btn btn-new" data-toggle="modal" href="#modal-new-wiki"><i class='fa fa-plus'></i>
New Page
</a></div>
</ul>
<div class='modal hide' id='modal-new-wiki'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<a class='close' data-dismiss='modal' href='#'>×</a>
<h3 class='page-title'>New Wiki Page</h3>
</div>
<div class='modal-body'>
<label for="new_wiki_path"><span>Page slug</span>
</label><input class="form-control" data-wikis-path="/systems/docs/wikis" id="new_wiki_path" name="new_wiki_path" placeholder="how-to-setup" required="required" type="text" />
<p class='hint'>
Please don't use spaces.
</p>
</div>
<div class='modal-footer'>
<a class="build-new-wiki btn btn-create" href="#">Build</a>
</div>
</div>
</div>
</div>


<h3 class='page-title'>
Testingtoc
<span class='pull-right'>
<a class="btn btn-grouped" href="/systems/docs/wikis/Testingtoc/history">Page History
</a><a class="btn btn-grouped" href="/systems/docs/wikis/Testingtoc/edit"><i class='fa fa-pencil-square-o'></i>
Edit
</a></span>

</h3>
<hr>
<div class='wiki-holder'>
<div class='wiki'>
<p>[[<em>TOC</em>]]</p>&#x000A;<h1 id="bla">Bla<a href="#bla"></a></h1><h2 id="bla-bla">bla bla<a href="#bla-bla"></a></h2><h1 id="bla">bla<a href="#bla"></a></h1><h2 id="bla">bla<a href="#bla"></a></h2><h2 id="bla">bla<a href="#bla"></a></h2></div>
</div>
<hr>
<div class='wiki-last-edit-by'>
Last edited by Sam McLeod <time class='time_ago' data-placement='top' data-toggle='tooltip' datetime='2015-03-07T02:41:31Z' title='Mar 07, 2015 1:41pm'>2015-03-07 13:41:31 +1100</time>
<script>$('.time_ago').timeago().tooltip()</script>

</div>

</div>
</div>
</div>
</div>
</div>

<script>
  (function() {
    $('.page-sidebar-collapsed .nav-sidebar a').tooltip({
      placement: "right"
    });
  
  }).call(this);
</script>

</body>
</html>

Here is the rendered HTML of the content block from Firefox 36.0.1:

<div class="content">
<div class="flash-container">
</div>

<div class="clearfix">
<ul class="nav nav-tabs">
<li class=""><a href="/systems/docs/wikis/home">Home</a>
</li><li class=""><a href="/systems/docs/wikis/pages">Pages</a>
</li><li class=""><a href="/systems/docs/wikis/git_access"><i class="fa fa-download"></i>
Git Access
</a></li><div class="pull-right">
<a class="add-new-wiki btn btn-new" data-toggle="modal" href="#modal-new-wiki"><i class="fa fa-plus"></i>
New Page
</a></div>
</ul>
<div class="modal hide" id="modal-new-wiki">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal" href="#">×</a>
<h3 class="page-title">New Wiki Page</h3>
</div>
<div class="modal-body">
<label for="new_wiki_path"><span>Page slug</span>
</label><input class="form-control" data-wikis-path="/systems/docs/wikis" id="new_wiki_path" name="new_wiki_path" placeholder="how-to-setup" required="required" type="text">
<p class="hint">
Please don't use spaces.
</p>
</div>
<div class="modal-footer">
<a class="build-new-wiki btn btn-create" href="#">Build</a>
</div>
</div>
</div>
</div>


<h3 class="page-title">
Testingtoc
<span class="pull-right">
<a class="btn btn-grouped" href="/systems/docs/wikis/Testingtoc/history">Page History
</a><a class="btn btn-grouped" href="/systems/docs/wikis/Testingtoc/edit"><i class="fa fa-pencil-square-o"></i>
Edit
</a></span>

</h3>
<hr>
<div class="wiki-holder">
<div class="wiki">
<p>[[<em>TOC</em>]]</p>
<h1 id="bla">Bla<a href="#bla"></a></h1><h2 id="bla-bla">bla bla<a href="#bla-bla"></a></h2><h1 id="bla">bla<a href="#bla"></a></h1><h2 id="bla">bla<a href="#bla"></a></h2><h2 id="bla">bla<a href="#bla"></a></h2></div>
</div>
<hr>
<div class="wiki-last-edit-by">
Last edited by Sam McLeod <time data-original-title="Mar 07, 2015 1:41pm" class="time_ago" data-placement="top" data-toggle="tooltip" datetime="2015-03-07T02:41:31Z" title="">less than a minute ago</time>
<script>$('.time_ago').timeago().tooltip()</script>

</div>

</div>
</div>

And lastly here is a screenshot of how it renders:

@sammcj The reason the TOC isn't rendered is commit 7665b1de, which disables Gollum's formatting for Markdown and uses the GitLab Markdown renderer (which is also used for issues and comments) instead.

I'll have a look next week, but it may not be trivial to combine the GitLab Markdown renderer with Gollum's special tags.

The SMB link is a different issue, that should be easier to fix. Will look into that as well.

Oh really? Does Gitlab's formatting have anything for rendering tables of contents as an alternative?

If not - my alternative is to manually make TOCs using a combination of regexes and copy and pasting but it's not very sustainable in the long term.

FYI for those looking for a temporary workaround - I've been using this Sublime Text plugin to help generate makeshift TOCs: https://packagecontrol.io/packages/MarkdownTOC

@sammcj I did some digging into this, and unfortunately it's not currently feasible to have the GitLab Markdown renderer and the Gollum one that supports TOC tags and other extra wiki-specific features work together, because the way they work and the markup they output is too different.

GitLab Markdown does not have any specific functionality for rendering ToC's, so your best bet would be to write and keep it up to date manually at the top of your wiki pages.

With regards to the SMB link issue, I'm working on a fix.

That is disappointing - Gitlab's wiki is shaping up to be great but it's a pain having to manually manage TOCs once you have a large number of articles / pages.

It would also be awesome if Gitlab's wiki supported Markdown table sorting - but that's for another day ;)

Anyway, thanks for looking at it - I appreciate it.

@sammcj Support for smb:// links has been added and will be in 7.9.

Thanks @DouweM

@sammcj for markdown toc I personally use this tool https://github.com/thlorenz/doctoc

We recently changed some Markdown parsing that might make this doable, so I'll take a look.

Reassigned to @rspeicher

+1 I would also very much appreciate this function.

Assignee removed

TOC is now rendering on the wiki

Status changed to closed

Thanks! ~~In which release was it fixed? Looks like the last related commit was a month ago, but I don't see the fix on gitlab.com. I suppose the latest release containing it hasn't made it there yet.~~

So it looks like it is being rendered on saved pages, but there are 2 issues:

It's not being rendered in previews, and
It's not honouring subtitle indenting (i.e. all H1s, H2s, H3s, etc. are kept at the same level).

Can anyone else reproduce?

@colan It should be live. To be clear: this is a list of the headers in the current document, not an index of all the wiki pages.

Make sure to use the [[_TOC_]] tag (case-sensitive, with underscores) and that your document has some headers.

There's also an open MR to add this to all Markdown documents, and to improve the nesting: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/3166

@rspeicher I believe @colan is right, see:

[[_TOC_]]

# Title 1

# Title 2

## Subtitle 1

Will render in gitlab.com preview as:

Goodnews is that it works with the changes in : !3461 (merged) :)

mentioned in merge request !3461 (merged)

Reassigned to @brodock

Milestone changed to 8.7

mentioned in commit 730625f0

Mentioned in issue #2073 (moved)

@colan Just updated to latest and still seeing the lack of honor (i.e. all H1s, H2s, H3s, etc. are kept at the same level).

These are H1s and H2s, but you can't tell from the TOC:

Mentioned in issue #23373 (closed)

Confirmed. I'm seeing the same thing. It's not hierarchical is both preview & live mode. I created a follow-up issue at #23373 (closed).

Assignee removed

Reassigned to @brodock

Wiki TOC isn't rendering

Here's how it looks in Gollum:

And how it looks in Gitlab:

Broken links

Designs

Child items ...

Activity

Admin message

Admin message

Wiki TOC isn't rendering

Here's how it looks in Gollum:

And how it looks in Gitlab:

Broken links

Activity