updated:  2022 08. December
published:  2022 31. August

Render Hooks

Markdown Funktionselemente umgestalten.

Warum Render Hooks?

Mit Render-Hooks können Markdown-Formatierungselemente anders gestaltet werden. Dazu bedarf es nur einer Datei im Verzeichnis _markup.


  └── themes
      └── dein-theme
         └── layouts
            └── _default
               └── _markup
                  ├── render-link.html
                  ├── render-heading.html
                  ├── render-image.html
                  ├── render-codeblocks.html
                  ├── render-codeblocks-bash.html
                  └── render-codeblocks-mermaid.html

Überschrift ändern

Um das vordefinierte Formatierungselement für Überschriften in Markdown zu ändern (also #), erzeuge die Datei render-heading.html im Verzeichnis layouts\_default\_markup mit folgendem Inhalt:

layouts\_default\_markup\render-heading.html 

 <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
	{{- if and (ge .Level 2) (le .Level 6) }}{{" " -}}
		<a href="#top">
			<abbr style="text-decoration: none" title="Zum Seitenanfang">&boxbox;</abbr>
		</a>
	{{- end -}}
 </h{{ .Level }}>

Der Code setzt am Ende einer Überschrift das Symbol ⧉ mit einem Link zum Seitenanfang (href="#top"). Außerdem wird ein kleiner Hilfetext angezeigt wenn der Mauszeiger auf das Symbol zeigt (<abbr ...).

Um Links zu externen Seiten in einem neuen Browsertabulator zu öffnen, ist folgender Render-Hook nützlich.

layouts\_default\_markup\render-link.html 

 <a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>
	{{- .Text | safeHTML -}}
 </a>

Bilder ändern

Mittels Render-Hooks kann die Darstellung von Bildern beeinflußt werden. Es ist auch möglich, den Standardaufruf mit Parametern zu ergänzen, so wie im Codefeld angezeigt.

Bilder in Markdown aufrufen 

 # Standardaufruf in Markdown
 ![](/path/to/image.jpg "Title")

 # Eweiterter Aufruf mit Parametern
 ![](/path/to/image.jpg "Title {ClassOption01 ClassOption02}")
 ![](/path/to/image.jpg "Title {ClassOption01 ClassOption02}[[Linkname01=href...][Linkname02=href...][...]]")
 ![](/path/to/image.jpg "Title {ClassOption01 ClassOption02}[[Linkname01=href...][Linkname02=href...][...]] #width=80%")

Beispiel 1

Die Datei render-image.html wurde erweitert um weitere Parameter zur Formatierung von Markdown in Html zu übergeben. Die Parameter sind innerhalb der Anführungszeichen im Titel festgelegt und folgende:

Parameter Beschreibung Werte/Beispiel
{ClassOption01 ClassOption02} Stylesoptionen frame, left, right
[[Linkname01=href…][Linkname02=href…][…]] Links übergeben [[CC=https://www…]]
#width Bildbreite in % #width=60%

Die Datei render-image.html und die entsprechende CSS-Datei wurden geändert.

layouts\_default\_markup\render-image.html 

{{- /*
 
 ![alternativer Text](/svg/Test.svg "Bildtitel {frame left} [[link1=href...][link2=href...]] #width=80%")

*/ -}}

{{- $storage := newScratch -}}
{{- $storage.Set "ImgClass" "" -}}
{{- $storage.Set "ImgLinkName" "" -}}
{{- $storage.Set "ImgWidth" "" -}}
{{- $storage.Set "ImgLinks" "" -}}
{{- $storage.Add "ImgTitle" .Title -}}
{{- $storage.Set "ImgTitleLinks" "" -}}

{{- /* <!-- Extract Link on [[Linkname01=href][Linkname02=href...]] --> */ -}}
{{- $tmp := findRE `\[[[:word:][:cntrl:][:graph:][:space:]]*\]` ($storage.Get "ImgTitle")  -}}
{{- if ne (len $tmp) 0 -}}
	{{- $storage.Add "ImgLinks" (index $tmp 0) -}}
	{{- $tmp := split ($storage.Get "ImgLinks") "][" -}}
	{{- $storage.Set "ImgTitleLinks" ($tmp) -}}
	{{- $tmp := replaceRE `\[[[:word:][:cntrl:][:graph:][:space:]]*\]` "" ($storage.Get "ImgTitle")  -}}
	{{- $storage.Set "ImgTitle" $tmp -}}
{{- end -}}

{{- /* <!-- Extract Class --> */ -}}
{{- $step1 := findRE `{[[:word:][:space:]]*}` ($storage.Get "ImgTitle")  -}}
{{- if ne (len $step1) 0 -}}
	{{- $step2 := index $step1 0 -}}
	{{- $step3 := trim $step2 "{}" -}}
	{{- /* <!-- save Image class --> */ -}}
	{{- $storage.Add "ImgClass" $step3 -}}
	{{- /* <!-- Save Rest von Title-Zeile --> */ -}}
	{{- $storage.Set "ImgTitle" (replaceRE (print "{" ($storage.Get "ImgClass") "}" ) "" ($storage.Get "ImgTitle")) -}}
{{- end -}}

{{- /* <!-- Extract Attribut #width -->*/ -}}
{{- $tmp := findRE `#width=[[:cntrl:][:space:][:graph:]]*` ($storage.Get "ImgTitle")  -}}
{{- if ne (len $tmp) 0 -}}
	{{- $storage.Add "ImgWidth" (index (split (index $tmp 0) "=") 1) -}}
	{{- /* 	<!-- Save Rest von Title-Zeile --> */ -}}
	{{- $storage.Set "ImgTitle" (replaceRE (print "#width=" ($storage.Get "ImgWidth") ) "" ($storage.Get "ImgTitle")) -}}
{{- end -}}

{{- /* <!-- Extract Attribut #caption -->*/ -}}
{{- $tmp := findRE `#linkname=[[:cntrl:][:space:][:graph:]]*` ($storage.Get "ImgTitle")  -}}
{{- if ne (len $tmp) 0 -}}
	{{- $storage.Add "ImgLinkName" (index (split (index $tmp 0) "=") 1) -}}
	{{- /* 	<!-- Save Rest von Title-Zeile --> */ -}}
	{{- $storage.Set "ImgTitle" (replaceRE (print "#linkname=" ($storage.Get "ImgLinkName") ) "" ($storage.Get "ImgTitle")) -}}
{{- end -}}

{{- /* <!-- Leerzeichen am Begin und am Ende löschen --> */ -}}
{{- range $i := (seq 5) -}}
	{{- $storage.Set "ImgTitle" (strings.TrimSuffix " " ($storage.Get "ImgTitle")) -}}
	{{- $storage.Set "ImgTitle" (strings.TrimPrefix " " ($storage.Get "ImgTitle")) -}}
{{- end -}}

</p>
<figure{{- with $storage.Get "ImgClass"}} class="{{ $storage.Get "ImgClass" }}"{{ end -}}>
	<a 	href="{{ .Destination | safeURL }}">
		<img 	src="{{ .Destination | safeURL }}"
				alt="{{ .Text }}"
				{{- with $storage.Get "ImgWidth"}} style="width:{{- $storage.Get "ImgWidth" -}};"{{ end -}}
				{{- with $storage.Get "ImgTitle"}} title="{{- $storage.Get "ImgTitle" -}}"{{ end -}}
				{{- with $storage.Get "ImgClass"}} class="{{- $storage.Get "ImgClass" -}}"{{ end -}}>
	</a>
	{{- if or (ne (len ($storage.Get "ImgTitle")) 0) (ne (len ($storage.Get "ImgTitleLinks")) 0)  -}}
		<figcaption {{- with $storage.Get "ImgClass"}} class="{{ $storage.Get "ImgClass" }}"{{ end -}}>
			<!-- Bildtitel anzeigen wenn vorhanden -->
			{{- if ne (len ($storage.Get "ImgTitle")) 0 -}}
				&nbsp;{{- $storage.Get "ImgTitle" -}}&nbsp;
			{{- end -}}
			<!-- Links anzeigen wenn vorhanden -->
			{{- if ne (len ($storage.Get "ImgTitleLinks")) 0  -}}
				&nbsp;&middot;&nbsp;
				{{- range $i, $value := $storage.Get "ImgTitleLinks" -}}
					{{- $link := (trim (trim $value "[") "]") -}}
					{{- $tmp := split $link "=" -}}
					{{- $linkname := (index $tmp 0) -}} 
					{{- $linkziel := (index $tmp 1) -}}
					<a href="{{- $linkziel -}}" target="_blank" rel="noopener">{{- $linkname -}}</a>
				    &middot;&nbsp;
				{{- end -}}
			{{- end -}}
		</figcaption>
	{{- end -}}
</figure>
<p>

Beispiel 2

 {{- $storage := newScratch -}}
 {{- $storage.Set "ImgClass" "" -}}
 {{- $storage.Set "ImgTitle" "" -}}

 {{- /*  Parse class attributes  */ -}}
 {{- $SuchString := .Title -}}
 {{- $step1 := findRE `{[[:word:][:space:]]*}` $SuchString  -}}
 {{- if ne (len $step1) 0 -}}
	{{- $step2 := index $step1 0 -}}
	{{- $step3 := trim $step2 "{}" -}}
	<!-- save Image class -->
	{{- $storage.Add "ImgClass" $step3 -}}
	<!-- save Image title -->
	{{- $storage.Add "ImgTitle" (index (split $SuchString "{") 0) -}}
 {{- else -}}
	{{- $storage.Add "ImgTitle" .Title -}}
 {{- end -}}

 <a href="{{ .Destination | safeURL }}" >
	<img 	src="{{ .Destination | safeURL }}" 
			alt="{{ .Text }}" 
			{{ with $storage.Get "ImgTitle"}} title="{{ $storage.Get "ImgTitle" }}"{{ end }} 
			{{ with $storage.Get "ImgClass"}} class="{{ $storage.Get "ImgClass" }}"{{ end }}/>
 </a>

 img {
	border: 0;
	max-width: 80%;
	height: auto;
	margin: 1em auto;
	display: block;
	
	&.frame {
		border: 1px solid $color_Code_border;
		border-radius: 0.3em;
		padding: 0px;
		box-shadow: 2px 2px 5px $color_Shadow;
	}
	&.left  { float: none; display: block;} 
	&.right { float: none; display: block;} 
 }

 /* Ansich bei Flexaufteilung 2 - Sidebarleft, Main */
 @media only screen and (min-width: $MinWidthFlex2) {
	img {		
		&.left  { float: inline-start;  margin: 1em 1em 1em 0em;} 
		&.right { float: inline-end; 	margin: 1em 0.5em 1em 1em;} 
	}
 }

 /* Ansich bei Flexaufteilung 1 - Sidebarleft, Main, SidebarRight */
 @media only screen and (min-width: $MinWidthFlex1) {
	img {		
		&.left  { float: inline-start;  margin: 1em 1em 1em 0em;} 
		&.right { float: inline-end; 	margin: 1em 0.5em 1em 1em;} 
	}
 }

 /* Desktop-Ansicht */
 @media only screen and (min-width: $MinWidth) {
	img {		
		&.left  { float: inline-start;  margin: 1em 1em 1em 0em;} 
		&.right { float: inline-end; 	margin: 1em 0.5em 1em 1em;} 
	}
 }
Stichworte (tags)