-
Notifications
You must be signed in to change notification settings - Fork 0
/
toc-in-readmemd-erstellen.html
22 lines (21 loc) · 10.5 KB
/
toc-in-readmemd-erstellen.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html><html lang="de-ch"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>TOC in README.md erstellen mit VSCode - Finecloud</title><meta name="description" content="TOC steht für Table of Contents (aka Inhaltsverzeichnis). Jedes grössere README Markdown File in einem git Repo sollte über ein TOC verfügen. Doch die Pflege eines TOC sowie die initiale Erstellung ist nicht sehr handlich, du musst für jeden einzelnen Titel in der richtigen Einrückung…"><meta name="generator" content="Publii Open-Source CMS for Static Site"><link rel="stylesheet" href="https://www.finecloud.ch/media/plugins/syntaxHighlighter/prism-black.css"><link rel="canonical" href="https://www.finecloud.ch/toc-in-readmemd-erstellen.html"><link rel="alternate" type="application/atom+xml" href="https://www.finecloud.ch/feed.xml"><link rel="alternate" type="application/json" href="https://www.finecloud.ch/feed.json"><meta property="og:title" content="TOC in README.md erstellen mit VSCode"><meta property="og:site_name" content="Finecloud"><meta property="og:description" content="TOC steht für Table of Contents (aka Inhaltsverzeichnis). Jedes grössere README Markdown File in einem git Repo sollte über ein TOC verfügen. Doch die Pflege eines TOC sowie die initiale Erstellung ist nicht sehr handlich, du musst für jeden einzelnen Titel in der richtigen Einrückung…"><meta property="og:url" content="https://www.finecloud.ch/toc-in-readmemd-erstellen.html"><meta property="og:type" content="article"><link rel="shortcut icon" href="https://www.finecloud.ch/media/website/finecloud.png" type="image/png"><link rel="stylesheet" href="https://www.finecloud.ch/assets/css/style.css?v=39da73365516a098a9b73b721fc970e2"><script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.finecloud.ch/toc-in-readmemd-erstellen.html"},"headline":"TOC in README.md erstellen mit VSCode","datePublished":"2022-06-25T08:07","dateModified":"2022-06-25T08:31","description":"TOC steht für Table of Contents (aka Inhaltsverzeichnis). Jedes grössere README Markdown File in einem git Repo sollte über ein TOC verfügen. Doch die Pflege eines TOC sowie die initiale Erstellung ist nicht sehr handlich, du musst für jeden einzelnen Titel in der richtigen Einrückung…","author":{"@type":"Person","name":"Finecloud","url":"https://www.finecloud.ch/authors/finecloud/"},"publisher":{"@type":"Organization","name":"Finecloud"}}</script><meta name="google-site-verification" content="seFY9U12uiEq5U3_MyZiX6XWzk0AVFl9zITr2ZKsytY"></head><body><div class="site-container"><header class="top" id="js-header"><a class="logo" href="https://www.finecloud.ch/">Finecloud</a><nav class="navbar js-navbar"><button class="navbar__toggle js-toggle" aria-label="Menu" aria-haspopup="true" aria-expanded="false"><span class="navbar__toggle-box"><span class="navbar__toggle-inner">Menu</span></span></button><ul class="navbar__menu"><li><a href="https://www.finecloud.ch/" target="_self">Blog</a></li><li><a href="https://www.finecloud.ch/tags/" target="_self">Tags</a></li></ul></nav><div class="search"><div class="search__overlay js-search-overlay"><div class="search__overlay-inner"><form action="https://www.finecloud.ch/search.html" class="search__form"><input class="search__input js-search-input" type="search" name="q" placeholder="search..." aria-label="search..." autofocus="autofocus"></form><button class="search__close js-search-close" aria-label="Close">Close</button></div></div><button class="search__btn js-search-btn" aria-label="Search"><svg role="presentation" focusable="false"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#search"/></svg></button></div></header><main><article class="post"><div class="hero"><figure class="hero__image hero__image--overlay"><img src="https://www.finecloud.ch/media/website/download.jpg" srcset="https://www.finecloud.ch/media/website/responsive/download-xs.jpg 300w, https://www.finecloud.ch/media/website/responsive/download-sm.jpg 480w, https://www.finecloud.ch/media/website/responsive/download-md.jpg 768w, https://www.finecloud.ch/media/website/responsive/download-lg.jpg 1024w, https://www.finecloud.ch/media/website/responsive/download-xl.jpg 1360w, https://www.finecloud.ch/media/website/responsive/download-2xl.jpg 1600w" sizes="100vw" loading="eager" alt=""></figure><header class="hero__content"><div class="wrapper"><div class="post__meta"><time datetime="2022-06-25T08:07">Juni 25, 2022</time></div><h1>TOC in README.md erstellen mit VSCode</h1></div></header></div><div class="wrapper post__entry"><p><em>TOC</em> steht für <em>Table of Contents</em> (aka Inhaltsverzeichnis). Jedes grössere README Markdown File in einem git Repo sollte über ein TOC verfügen.</p><p>Doch die Pflege eines TOC sowie die initiale Erstellung ist nicht sehr handlich, du musst für jeden einzelnen Titel in der richtigen Einrückung (damit die Titelanordnung stimmt) folgender Inhalt eintippen, obwohl du diese ja bereits als Titel in der Markdown Datei definiert hast:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-bullet" style="color: #6897bb;">- </span>[<span class="hljs-string" style="color: #6a8759;">Table of Contents</span>](<span class="hljs-link" style="color: #629755;">#table-of-contents</span>)
<span class="hljs-bullet" style="color: #6897bb;">- </span>[<span class="hljs-string" style="color: #6a8759;">Verbesserungen</span>](<span class="hljs-link" style="color: #629755;">#verbesserungen</span>)
<span class="hljs-bullet" style="color: #6897bb;">- </span>[<span class="hljs-string" style="color: #6a8759;">Anpassungen innerhalb dieses Repositories</span>](<span class="hljs-link" style="color: #629755;">#anpassungen-innerhalb-dieses-repositories</span>)
<span class="hljs-code"> - [CI Pipeline](#ci-pipeline)</span>
</pre><p>damit dann dieses schöne Inhaltsverzeichnis entsteht:</p><figure class="post__image"><img loading="lazy" src="https://www.finecloud.ch/media/posts/39/Screenshot-2022-06-25-at-08.21.47.png" alt="" width="366" height="115" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/39/responsive/Screenshot-2022-06-25-at-08.21.47-xs.png 300w, https://www.finecloud.ch/media/posts/39/responsive/Screenshot-2022-06-25-at-08.21.47-sm.png 480w, https://www.finecloud.ch/media/posts/39/responsive/Screenshot-2022-06-25-at-08.21.47-md.png 768w, https://www.finecloud.ch/media/posts/39/responsive/Screenshot-2022-06-25-at-08.21.47-lg.png 1024w, https://www.finecloud.ch/media/posts/39/responsive/Screenshot-2022-06-25-at-08.21.47-xl.png 1360w, https://www.finecloud.ch/media/posts/39/responsive/Screenshot-2022-06-25-at-08.21.47-2xl.png 1600w"></figure><p>Doch es gibt einen Weg, wie du ohne die Arbeit doppelt zu machen (jeden Titel zweimal schreiben 😒), einfach und schnell aus deinem Markdown ein TOC erstellen und später auch einfach wieder aktualisieren kannst. </p><p>In der IDE VSCode kannst du dazu die Extension <a href="https://marketplace.visualstudio.com/items?itemName=huntertran.auto-markdown-toc" target="_blank" rel="nofollow noopener noreferrer">Auto Markdown TOC</a> installieren. Es gibt duzende solche Extensions, lass mich wissen wenn du ein besseres findest. 😃</p><p>Wenn du die Extension installiert hast, kannst du anschliessend direkt aus VSCode in deinem Markdown File ein TOC generieren lassen:</p><figure class="AnimatedImagePlayer-animatedImage"><img loading="lazy" style="display: block; opacity: 1;" src="https://github.com/huntertran/markdown-toc/raw/master/img/insert-toc.gif" alt="Insert TOC" data-target="animated-image.replacedImage" data-is-external-image="true"></figure><p>Viel Spass damit!</p></div><footer class="wrapper post__footer"><p class="post__last-updated">This article was updated on Juni 25, 2022</p><ul class="post__tag"><li><a href="https://www.finecloud.ch/tags/git/">git</a></li><li><a href="https://www.finecloud.ch/tags/markdown/">markdown</a></li><li><a href="https://www.finecloud.ch/tags/vscode/">vscode</a></li></ul><div class="post__share"></div></footer></article><nav class="post__nav"><div class="post__nav-inner"><div class="post__nav-prev"><svg width="1.041em" height="0.416em" aria-hidden="true"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#arrow-prev"/></svg> <a href="https://www.finecloud.ch/java-serverlet-entwickeln-mit-vscode.html" class="post__nav-link" rel="prev"><span>Previous</span> Java Serverlet mit Tomcat und Maven in VSCode</a></div><div class="post__nav-next"><a href="https://www.finecloud.ch/http-methoden-rfc9110.html" class="post__nav-link" rel="next"><span>Next</span> HTTP Methoden - RFC9110 </a><svg width="1.041em" height="0.416em" aria-hidden="true"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#arrow-next"/></svg></div></div></nav><div class="post__related related"><div class="wrapper"><h2 class="h5 related__title">You should also read:</h2><article class="related__item"><div class="feed__meta"><time datetime="2022-06-22T07:51" class="feed__date">Juni 22, 2022</time></div><h3 class="h1"><a href="https://www.finecloud.ch/java-serverlet-entwickeln-mit-vscode.html">Java Serverlet mit Tomcat und Maven in VSCode</a></h3></article></div></div></main><footer class="footer"><div class="footer__copyright"><p>Powered by Publii</p></div><button onclick="backToTopFunction()" id="backToTop" class="footer__bttop" aria-label="Back to top" title="Back to top"><svg><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#toparrow"/></svg></button></footer></div><script>window.publiiThemeMenuConfig = {
mobileMenuMode: 'sidebar',
animationSpeed: 300,
submenuWidth: 'auto',
doubleClickTime: 500,
mobileMenuExpandableSubmenus: true,
relatedContainerForOverlayMenuSelector: '.top',
};</script><script defer="defer" src="https://www.finecloud.ch/assets/js/scripts.min.js?v=6ca8b60e6534a3888de1205e82df8528"></script><script>var images = document.querySelectorAll('img[loading]');
for (var i = 0; i < images.length; i++) {
if (images[i].complete) {
images[i].classList.add('is-loaded');
} else {
images[i].addEventListener('load', function () {
this.classList.add('is-loaded');
}, false);
}
}</script><script defer="defer" src="https://www.finecloud.ch/media/plugins/syntaxHighlighter/prism.js"></script></body></html>