Skip to content

Commit

Permalink
Example of CSS styling and making standalone HTML documents
Browse files Browse the repository at this point in the history
  • Loading branch information
@Moonbase59
Moonbase59 committed Apr 8, 2024
1 parent cb4049a commit 88f14e0
Show file tree
Hide file tree
Showing 7 changed files with 579 additions and 11 deletions.
37 changes: 35 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ Quickly create Table-of-Content Markdown for GitHub Markdown files.
- [From simple Table of Contents…](#from-simple-table-of-contents)
- [… to full-fledged Markdown with anchors and backlinks!](#-to-full-fledged-markdown-with-anchors-and-backlinks)
- [Warning if ToC cannot be inserted into full Markdown](#warning-if-toc-cannot-be-inserted-into-full-markdown)
- [Styling the backlinks with CSS](#styling-the-backlinks-with-css)
- [The evolution of a "simple" tool](#the-evolution-of-a-simple-tool)
- [Known problems](#known-problems)
- [The Real Magic](#the-real-magic)
Expand Down Expand Up @@ -83,7 +84,7 @@ in the Markdown file, which Pandoc then converts to this HTML:
4. Copy-paste the contents of the _right_ input box into a text editor and save as `testing-html-anchors.md`.
5. Convert to HTML using [_Pandoc_](https://pandoc.org/):
```bash
pandoc -f markdown-auto_identifiers -t html testing-html-anchors.md -o testing-html-anchors.html
pandoc -s -f markdown-auto_identifiers+yaml_metadata_block -t html testing-html-anchors.md -o testing-html-anchors.html
```
6. Open [`testing-html-anchors.html`](https://moonbase59.github.io/gh-toc/testing-html-anchors.html) in your favourite browser and test the links.

Expand Down Expand Up @@ -118,7 +119,7 @@ in the Markdown file, which Pandoc then converts to this HTML:
4. Copy-paste the contents of the _right_ input box into a text editor and save as `testing-curly-anchors.md`.
5. Convert to HTML using [_Pandoc_](https://pandoc.org/):
```bash
pandoc -f markdown -t html testing-curly-anchors.md -o testing-curly-anchors.html
pandoc -s -f markdown+yaml_metadata_block -t html testing-curly-anchors.md -o testing-curly-anchors.html
```
6. Open [`testing-curly-anchors.html`](https://moonbase59.github.io/gh-toc/testing-curly-anchors.html) in your favourite browser and test the links.

Expand Down Expand Up @@ -152,6 +153,38 @@ Also try the other options, like auto-generated backlinks to ⇧Top or ⇧ToC ne

![screenshot-warning](screenshot-warning.png)

### <a name="styling-the-backlinks-with-css"></a>Styling the backlinks with CSS <a href="#toc" class="goToc">⇧</a>

Yes, you can! Generated backlinks use the classes `goToc` and `goTop`, respectively. The `testing.md` document includes my example [`gh-toc.css`](gh-toc.css) so you can see the effect:

```css
/* gh-toc.css
*
* An example for styling the backlinks.
*
* Let’s make them 50% opaque and remove the link underline.
* Let’s also change the "Top" symbol. (An awful hack, but it works.)
*
*/
.goToc {
text-decoration: none;
opacity: 0.5;
}
.goTop {
position: absolute;
visibility: hidden;
}
.goTop::before {
content: '🔝︎'; /* U+1F51D + U+FE0E */
text-decoration: none;
opacity: 0.5;
visibility: visible;
}
```

## <a name="the-evolution-of-a-simple-tool"></a>The evolution of a "simple" tool <a href="#toc" class="goToc">⇧</a>

It all started out because I looked for a quick way to generate a GitHub README Table-of-Contents. Looking around, most solutions required installing some software my system. No problem so far, but I work on a lot of machines, different operating systems and all. So it would never simply be _available_.
Expand Down
25 changes: 25 additions & 0 deletions gh-toc.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/* gh-toc.css
*
* An example for styling the backlinks.
*
* Let’s make them 50% opaque and remove the link underline.
* Let’s also change the "Top" symbol. (An awful hack, but it works.)
*
*/

.goToc {
text-decoration: none;
opacity: 0.5;
}

.goTop {
position: absolute;
visibility: hidden;
}

.goTop::before {
content: '🔝︎'; /* U+1F51D + U+FE0E */
text-decoration: none;
opacity: 0.5;
visibility: visible;
}
246 changes: 246 additions & 0 deletions testing-curly-anchors.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,247 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="author" content="Matthias C. Hormann, a.k.a. Moonbase59" />
<meta name="dcterms.date" content="2024-04-08" />
<title>testing.md</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
svg {
height: auto;
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
/* CSS for syntax highlighting */
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>
<link rel="stylesheet" href="gh-toc.css" />
</head>
<body>
<header id="title-block-header">
<h1 class="title">testing.md</h1>
<p class="subtitle">Testing edge cases for gh-toc</p>
<p class="author">Matthias C. Hormann, a.k.a. Moonbase59</p>
<p class="date">2024-04-08</p>
</header>
<h1 id="gh-toc">gh-toc</h1>
<p>These are some testing samples for <a
href="https://moonbase59.github.io/gh-toc/">gh-toc</a>.</p>
Expand Down Expand Up @@ -263,3 +507,5 @@ <h3 id="none">None</h3>
faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.
Ut varius tincidunt libero. Phasellus dolor.</p>
<p><strong>Enjoy!</strong></p>
</body>
</html>
12 changes: 9 additions & 3 deletions testing-curly-anchors.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
---
title: testing.md – Testing edge cases for gh-toc
date: 2024-04-06
# A YAML comment that could be mis-interpreted as a H1 heading
title: testing.md
subtitle: Testing edge cases for gh-toc
author: Matthias C. Hormann, a.k.a. Moonbase59
date: 2024-04-08
lang: en
# A YAML comment that could be mis-interpreted as a H1 heading.
# Use Pandoc’s default template, but also include our styling example CSS.
document-css: true
css: gh-toc.css
---
# gh-toc {#gh-toc}

Expand Down
Loading

0 comments on commit 88f14e0

Please sign in to comment.