mirror of
				https://github.com/gohugoio/hugo.git
				synced 2024-05-11 05:54:58 +00:00 
			
		
		
		
	Add Markdown diagrams and render hooks for code blocks
You can now create custom hook templates for code blocks, either one for all (`render-codeblock.html`) or for a given code language (e.g. `render-codeblock-go.html`). We also used this new hook to add support for diagrams in Hugo: * Goat (Go ASCII Tool) is built-in and enabled by default; just create a fenced code block with the language `goat` and start draw your Ascii diagrams. * Another popular alternative for diagrams in Markdown, Mermaid (supported by GitHub), can also be implemented with a simple template. See the Hugo documentation for more information. Updates #7765 Closes #9538 Fixes #9553 Fixes #8520 Fixes #6702 Fixes #9558
This commit is contained in:
		
							
								
								
									
										115
									
								
								markup/goldmark/codeblocks/integration_test.go
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										115
									
								
								markup/goldmark/codeblocks/integration_test.go
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,115 @@
 | 
			
		||||
// Copyright 2022 The Hugo Authors. All rights reserved.
 | 
			
		||||
//
 | 
			
		||||
// Licensed under the Apache License, Version 2.0 (the "License");
 | 
			
		||||
// you may not use this file except in compliance with the License.
 | 
			
		||||
// You may obtain a copy of the License at
 | 
			
		||||
// http://www.apache.org/licenses/LICENSE-2.0
 | 
			
		||||
//
 | 
			
		||||
// Unless required by applicable law or agreed to in writing, software
 | 
			
		||||
// distributed under the License is distributed on an "AS IS" BASIS,
 | 
			
		||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 | 
			
		||||
// See the License for the specific language governing permissions and
 | 
			
		||||
// limitations under the License.
 | 
			
		||||
 | 
			
		||||
package codeblocks_test
 | 
			
		||||
 | 
			
		||||
import (
 | 
			
		||||
	"strings"
 | 
			
		||||
	"testing"
 | 
			
		||||
 | 
			
		||||
	"github.com/gohugoio/hugo/hugolib"
 | 
			
		||||
)
 | 
			
		||||
 | 
			
		||||
func TestCodeblocks(t *testing.T) {
 | 
			
		||||
	t.Parallel()
 | 
			
		||||
 | 
			
		||||
	files := `
 | 
			
		||||
-- config.toml --
 | 
			
		||||
[markup]
 | 
			
		||||
  [markup.highlight]
 | 
			
		||||
    anchorLineNos = false
 | 
			
		||||
    codeFences = true
 | 
			
		||||
    guessSyntax = false
 | 
			
		||||
    hl_Lines = ''
 | 
			
		||||
    lineAnchors = ''
 | 
			
		||||
    lineNoStart = 1
 | 
			
		||||
    lineNos = false
 | 
			
		||||
    lineNumbersInTable = true
 | 
			
		||||
    noClasses = false
 | 
			
		||||
    style = 'monokai'
 | 
			
		||||
    tabWidth = 4
 | 
			
		||||
-- layouts/_default/_markup/render-codeblock-goat.html --
 | 
			
		||||
{{ $diagram := diagrams.Goat .Code }}
 | 
			
		||||
Goat SVG:{{ substr $diagram.SVG 0 100 | safeHTML }}  }}|
 | 
			
		||||
Goat Attribute: {{ .Attributes.width}}|
 | 
			
		||||
-- layouts/_default/_markup/render-codeblock-go.html --
 | 
			
		||||
Go Code: {{ .Code | safeHTML }}|
 | 
			
		||||
Go Language: {{ .Lang }}|
 | 
			
		||||
-- layouts/_default/single.html --
 | 
			
		||||
{{ .Content }}
 | 
			
		||||
-- content/p1.md --
 | 
			
		||||
---
 | 
			
		||||
title: "p1"
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
## Ascii Diagram
 | 
			
		||||
 | 
			
		||||
CODE_FENCEgoat { width="600" }
 | 
			
		||||
--->
 | 
			
		||||
CODE_FENCE
 | 
			
		||||
 | 
			
		||||
## Go Code
 | 
			
		||||
 | 
			
		||||
CODE_FENCEgo
 | 
			
		||||
fmt.Println("Hello, World!");
 | 
			
		||||
CODE_FENCE
 | 
			
		||||
 | 
			
		||||
## Golang Code
 | 
			
		||||
 | 
			
		||||
CODE_FENCEgolang
 | 
			
		||||
fmt.Println("Hello, Golang!");
 | 
			
		||||
CODE_FENCE
 | 
			
		||||
 | 
			
		||||
## Bash Code
 | 
			
		||||
 | 
			
		||||
CODE_FENCEbash { linenos=inline,hl_lines=[2,"5-6"],linenostart=32 class=blue }
 | 
			
		||||
echo "l1";
 | 
			
		||||
echo "l2";
 | 
			
		||||
echo "l3";
 | 
			
		||||
echo "l4";
 | 
			
		||||
echo "l5";
 | 
			
		||||
echo "l6";
 | 
			
		||||
echo "l7";
 | 
			
		||||
echo "l8";
 | 
			
		||||
CODE_FENCE
 | 
			
		||||
`
 | 
			
		||||
 | 
			
		||||
	files = strings.ReplaceAll(files, "CODE_FENCE", "```")
 | 
			
		||||
 | 
			
		||||
	b := hugolib.NewIntegrationTestBuilder(
 | 
			
		||||
		hugolib.IntegrationTestConfig{
 | 
			
		||||
			T:           t,
 | 
			
		||||
			TxtarString: files,
 | 
			
		||||
			NeedsOsFS:   false,
 | 
			
		||||
		},
 | 
			
		||||
	).Build()
 | 
			
		||||
 | 
			
		||||
	b.AssertFileContent("public/p1/index.html", `
 | 
			
		||||
Goat SVG:<svg class='diagram'
 | 
			
		||||
Goat Attribute: 600|
 | 
			
		||||
 | 
			
		||||
Go Language: go|
 | 
			
		||||
Go Code: fmt.Println("Hello, World!");
 | 
			
		||||
 | 
			
		||||
Go Code: fmt.Println("Hello, Golang!");
 | 
			
		||||
Go Language: golang|
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
	`,
 | 
			
		||||
		"Goat SVG:<svg class='diagram' xmlns='http://www.w3.org/2000/svg' version='1.1' height='25' width='40'",
 | 
			
		||||
		"Goat Attribute: 600|",
 | 
			
		||||
		"<h2 id=\"go-code\">Go Code</h2>\nGo Code: fmt.Println(\"Hello, World!\");\n|\nGo Language: go|",
 | 
			
		||||
		"<h2 id=\"golang-code\">Golang Code</h2>\nGo Code: fmt.Println(\"Hello, Golang!\");\n|\nGo Language: golang|",
 | 
			
		||||
		"<h2 id=\"bash-code\">Bash Code</h2>\n<div class=\"highlight blue\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-bash\" data-lang=\"bash\"><span class=\"line\"><span class=\"ln\">32</span><span class=\"cl\"><span class=\"nb\">echo</span> <span class=\"s2\">"l1"</span><span class=\"p\">;</span>\n</span></span><span class=\"line hl\"><span class=\"ln\">33</span>",
 | 
			
		||||
	)
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										159
									
								
								markup/goldmark/codeblocks/render.go
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										159
									
								
								markup/goldmark/codeblocks/render.go
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,159 @@
 | 
			
		||||
// Copyright 2022 The Hugo Authors. All rights reserved.
 | 
			
		||||
//
 | 
			
		||||
// Licensed under the Apache License, Version 2.0 (the "License");
 | 
			
		||||
// you may not use this file except in compliance with the License.
 | 
			
		||||
// You may obtain a copy of the License at
 | 
			
		||||
// http://www.apache.org/licenses/LICENSE-2.0
 | 
			
		||||
//
 | 
			
		||||
// Unless required by applicable law or agreed to in writing, software
 | 
			
		||||
// distributed under the License is distributed on an "AS IS" BASIS,
 | 
			
		||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 | 
			
		||||
// See the License for the specific language governing permissions and
 | 
			
		||||
// limitations under the License.
 | 
			
		||||
 | 
			
		||||
package codeblocks
 | 
			
		||||
 | 
			
		||||
import (
 | 
			
		||||
	"bytes"
 | 
			
		||||
	"fmt"
 | 
			
		||||
 | 
			
		||||
	"github.com/gohugoio/hugo/markup/converter/hooks"
 | 
			
		||||
	"github.com/gohugoio/hugo/markup/goldmark/internal/render"
 | 
			
		||||
	"github.com/gohugoio/hugo/markup/internal/attributes"
 | 
			
		||||
	"github.com/yuin/goldmark"
 | 
			
		||||
	"github.com/yuin/goldmark/ast"
 | 
			
		||||
	"github.com/yuin/goldmark/parser"
 | 
			
		||||
	"github.com/yuin/goldmark/renderer"
 | 
			
		||||
	"github.com/yuin/goldmark/text"
 | 
			
		||||
	"github.com/yuin/goldmark/util"
 | 
			
		||||
)
 | 
			
		||||
 | 
			
		||||
type (
 | 
			
		||||
	diagrams     struct{}
 | 
			
		||||
	htmlRenderer struct{}
 | 
			
		||||
)
 | 
			
		||||
 | 
			
		||||
func New() goldmark.Extender {
 | 
			
		||||
	return &diagrams{}
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (e *diagrams) Extend(m goldmark.Markdown) {
 | 
			
		||||
	m.Parser().AddOptions(
 | 
			
		||||
		parser.WithASTTransformers(
 | 
			
		||||
			util.Prioritized(&Transformer{}, 100),
 | 
			
		||||
		),
 | 
			
		||||
	)
 | 
			
		||||
	m.Renderer().AddOptions(renderer.WithNodeRenderers(
 | 
			
		||||
		util.Prioritized(newHTMLRenderer(), 100),
 | 
			
		||||
	))
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func newHTMLRenderer() renderer.NodeRenderer {
 | 
			
		||||
	r := &htmlRenderer{}
 | 
			
		||||
	return r
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (r *htmlRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) {
 | 
			
		||||
	reg.Register(KindCodeBlock, r.renderCodeBlock)
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (r *htmlRenderer) renderCodeBlock(w util.BufWriter, src []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
 | 
			
		||||
	ctx := w.(*render.Context)
 | 
			
		||||
 | 
			
		||||
	if entering {
 | 
			
		||||
		return ast.WalkContinue, nil
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	n := node.(*codeBlock)
 | 
			
		||||
	lang := string(n.b.Language(src))
 | 
			
		||||
	ordinal := n.ordinal
 | 
			
		||||
 | 
			
		||||
	var buff bytes.Buffer
 | 
			
		||||
 | 
			
		||||
	l := n.b.Lines().Len()
 | 
			
		||||
	for i := 0; i < l; i++ {
 | 
			
		||||
		line := n.b.Lines().At(i)
 | 
			
		||||
		buff.Write(line.Value(src))
 | 
			
		||||
	}
 | 
			
		||||
	text := buff.String()
 | 
			
		||||
 | 
			
		||||
	var info []byte
 | 
			
		||||
	if n.b.Info != nil {
 | 
			
		||||
		info = n.b.Info.Segment.Value(src)
 | 
			
		||||
	}
 | 
			
		||||
	attrs := getAttributes(n.b, info)
 | 
			
		||||
 | 
			
		||||
	v := ctx.RenderContext().GetRenderer(hooks.CodeBlockRendererType, lang)
 | 
			
		||||
	if v == nil {
 | 
			
		||||
		return ast.WalkStop, fmt.Errorf("no code renderer found for %q", lang)
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	cr := v.(hooks.CodeBlockRenderer)
 | 
			
		||||
 | 
			
		||||
	err := cr.RenderCodeblock(
 | 
			
		||||
		w,
 | 
			
		||||
		codeBlockContext{
 | 
			
		||||
			page:             ctx.DocumentContext().Document,
 | 
			
		||||
			lang:             lang,
 | 
			
		||||
			code:             text,
 | 
			
		||||
			ordinal:          ordinal,
 | 
			
		||||
			AttributesHolder: attributes.New(attrs, attributes.AttributesOwnerCodeBlock),
 | 
			
		||||
		},
 | 
			
		||||
	)
 | 
			
		||||
 | 
			
		||||
	ctx.AddIdentity(cr)
 | 
			
		||||
 | 
			
		||||
	return ast.WalkContinue, err
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
type codeBlockContext struct {
 | 
			
		||||
	page    interface{}
 | 
			
		||||
	lang    string
 | 
			
		||||
	code    string
 | 
			
		||||
	ordinal int
 | 
			
		||||
	*attributes.AttributesHolder
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (c codeBlockContext) Page() interface{} {
 | 
			
		||||
	return c.page
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (c codeBlockContext) Lang() string {
 | 
			
		||||
	return c.lang
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (c codeBlockContext) Code() string {
 | 
			
		||||
	return c.code
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (c codeBlockContext) Ordinal() int {
 | 
			
		||||
	return c.ordinal
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func getAttributes(node *ast.FencedCodeBlock, infostr []byte) []ast.Attribute {
 | 
			
		||||
	if node.Attributes() != nil {
 | 
			
		||||
		return node.Attributes()
 | 
			
		||||
	}
 | 
			
		||||
	if infostr != nil {
 | 
			
		||||
		attrStartIdx := -1
 | 
			
		||||
 | 
			
		||||
		for idx, char := range infostr {
 | 
			
		||||
			if char == '{' {
 | 
			
		||||
				attrStartIdx = idx
 | 
			
		||||
				break
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
		if attrStartIdx > 0 {
 | 
			
		||||
			n := ast.NewTextBlock() // dummy node for storing attributes
 | 
			
		||||
			attrStr := infostr[attrStartIdx:]
 | 
			
		||||
			if attrs, hasAttr := parser.ParseAttributes(text.NewReader(attrStr)); hasAttr {
 | 
			
		||||
				for _, attr := range attrs {
 | 
			
		||||
					n.SetAttribute(attr.Name, attr.Value)
 | 
			
		||||
				}
 | 
			
		||||
				return n.Attributes()
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	return nil
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										53
									
								
								markup/goldmark/codeblocks/transform.go
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										53
									
								
								markup/goldmark/codeblocks/transform.go
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,53 @@
 | 
			
		||||
package codeblocks
 | 
			
		||||
 | 
			
		||||
import (
 | 
			
		||||
	"github.com/yuin/goldmark/ast"
 | 
			
		||||
	"github.com/yuin/goldmark/parser"
 | 
			
		||||
	"github.com/yuin/goldmark/text"
 | 
			
		||||
)
 | 
			
		||||
 | 
			
		||||
// Kind is the kind of an Hugo code block.
 | 
			
		||||
var KindCodeBlock = ast.NewNodeKind("HugoCodeBlock")
 | 
			
		||||
 | 
			
		||||
// Its raw contents are the plain text of the code block.
 | 
			
		||||
type codeBlock struct {
 | 
			
		||||
	ast.BaseBlock
 | 
			
		||||
	ordinal int
 | 
			
		||||
	b       *ast.FencedCodeBlock
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
func (*codeBlock) Kind() ast.NodeKind { return KindCodeBlock }
 | 
			
		||||
 | 
			
		||||
func (*codeBlock) IsRaw() bool { return true }
 | 
			
		||||
 | 
			
		||||
func (b *codeBlock) Dump(src []byte, level int) {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
type Transformer struct{}
 | 
			
		||||
 | 
			
		||||
// Transform transforms the provided Markdown AST.
 | 
			
		||||
func (*Transformer) Transform(doc *ast.Document, reader text.Reader, pctx parser.Context) {
 | 
			
		||||
	var codeBlocks []*ast.FencedCodeBlock
 | 
			
		||||
 | 
			
		||||
	ast.Walk(doc, func(node ast.Node, enter bool) (ast.WalkStatus, error) {
 | 
			
		||||
		if !enter {
 | 
			
		||||
			return ast.WalkContinue, nil
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
		cb, ok := node.(*ast.FencedCodeBlock)
 | 
			
		||||
		if !ok {
 | 
			
		||||
			return ast.WalkContinue, nil
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
		codeBlocks = append(codeBlocks, cb)
 | 
			
		||||
		return ast.WalkContinue, nil
 | 
			
		||||
	})
 | 
			
		||||
 | 
			
		||||
	for i, cb := range codeBlocks {
 | 
			
		||||
		b := &codeBlock{b: cb, ordinal: i}
 | 
			
		||||
		parent := cb.Parent()
 | 
			
		||||
		if parent != nil {
 | 
			
		||||
			parent.ReplaceChild(parent, cb, b)
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user