3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-11 08:07:26 +02:00
Code Issues Projects Releases Packages Wiki Activity

Switch to GFM-style heading anchors (#164)

Browse source
This commit is contained in:
Héctor Ramos 2017-10-26 16:12:17 -07:00 • committed by Joel Marcey
parent ba666cc6ae
commit 73b9a1128b
4 changed files with 23 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

10
docs/api-doc-markdown.md
View file

@ -5,7 +5,7 @@ title: Markdown Features
## Markdown Headers ## Markdown Headers
## Documents ### Documents
Documents use the following markdown header fields that are enclosed by a line `---` on either side: Documents use the following markdown header fields that are enclosed by a line `---` on either side:
@ -38,7 +38,7 @@ original_id: doc1
--- ---
``` ```
## Blog Posts ### Blog Posts
Blog Posts use the following markdown header fields that are enclosed by a line `---` on either side: Blog Posts use the following markdown header fields that are enclosed by a line `---` on either side:
@ -65,7 +65,7 @@ authorFBID: 100002976521003
Docusaurus supports some extra features when writing documentation in markdown. Docusaurus supports some extra features when writing documentation in markdown.
## Linking other Documents ### Linking other Documents
You can use relative urls to other documentation files which will automatically get converted to the corresponding html links when they get rendered. You can use relative urls to other documentation files which will automatically get converted to the corresponding html links when they get rendered.
@ -78,7 +78,7 @@ This markdown will automatically get converted into a link to `/docs/other-docum
This can help when you want to navigate through docs on GitHub since the links there will be functional links to other documents (still on GitHub), but the documents will have the correct html links when they get rendered. This can help when you want to navigate through docs on GitHub since the links there will be functional links to other documents (still on GitHub), but the documents will have the correct html links when they get rendered.
## Linking to Images and Other Assets ### Linking to Images and Other Assets
Static assets can be linked to in the same way that documents are, using relative urls. Static assets used in documents and blogs should go into `docs/assets` and `website/blog/assets`, respectively. The markdown will get converted into correct link paths so that these paths will work for documents of all languages and versions. Static assets can be linked to in the same way that documents are, using relative urls. Static assets used in documents and blogs should go into `docs/assets` and `website/blog/assets`, respectively. The markdown will get converted into correct link paths so that these paths will work for documents of all languages and versions.
@ -89,7 +89,7 @@ Example:
``` ```
## Generating Table of Contents ### Generating Table of Contents
You can make an autogenerated list of links, which can be useful as a table of contents for API docs. You can make an autogenerated list of links, which can be useful as a table of contents for API docs.

7
lib/core/Remarkable.js
View file

@ -12,10 +12,8 @@ const CWD = process.cwd();
*/ */
function anchors(md) { function anchors(md) {
md.renderer.rules.heading_open = function(tokens, idx /*, options, env */) { md.renderer.rules.heading_open = function(tokens, idx /*, options, env */) {
return '<h' + tokens[idx].hLevel + '>' + '<a class="anchor" name="' + toSlug(tokens[idx+1].content) + '"></a>'; const textToken = tokens[idx+1];
}; return '<h' + tokens[idx].hLevel + '><a class="anchor" aria-hidden="true" name="' + toSlug(textToken.content) + '"></a><a href="#' + toSlug(textToken.content) + '" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>';
md.renderer.rules.heading_close = function(tokens, idx /*, options, env */) {
return ' <a class="hash-link" href="#' + toSlug(tokens[idx-1].content) + '">#</a>' + '</h' + tokens[idx].hLevel + '>\n';
}; };
} }
@ -75,7 +73,6 @@ class Remarkable extends React.Component {
} }
} }
const html = this.md.render(source); const html = this.md.render(source);
// Ensure fenced code blocks use Highlight.js hljs class // Ensure fenced code blocks use Highlight.js hljs class

20
lib/static/css/main.css
View file

@ -82,13 +82,19 @@ a.anchor {
} }
a.hash-link { a.hash-link {
float: left;
padding-right: 4px;
margin-top: 4px;
margin-left: -20px;
line-height: 1.2;
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
h1:hover a.hash-link,
h2:hover a.hash-link, h1:hover .hash-link,
h3:hover a.hash-link, h2:hover .hash-link,
h4:hover a.hash-link { h3:hover .hash-link,
h4:hover .hash-link {
opacity: 0.5; opacity: 0.5;
transition: none; transition: none;
} }
@ -158,7 +164,7 @@ header h2 {
.wrapper { .wrapper {
margin: 0px auto; margin: 0px auto;
max-width: 1024px; max-width: 1024px;
padding: 0 10px; padding: 0 20px;
} }
.projectLogo { .projectLogo {
@ -1262,6 +1268,10 @@ nav.toc:last-child {
nav.toc:last-child { nav.toc:last-child {
padding-bottom: 0; padding-bottom: 0;
} }
a.anchor {
top: -144px;
}
} }
.docsNavContainer nav.toc .navWrapper { .docsNavContainer nav.toc .navWrapper {
padding: 0; padding: 0;