Fixed {{ and }} can't be in code problem

ch/code.go

@@ -7,31 +7,27 @@ import (
 )
 
 type CodeBuilder struct {
-	tag  *h.HTMLTagBuilder
-	code string
+	tag *h.HTMLTagBuilder
 }
 
 func Code(code string) (r *CodeBuilder) {
 	r = &CodeBuilder{
-		tag: h.Tag("bran-code"),
+		tag: h.Tag("highlightjs").Attr(":language", h.JSONString("go")),
 	}
 	r.Code(code)
 	return
 }
 
 func (b *CodeBuilder) Code(v string) (r *CodeBuilder) {
-	b.code = v
+	b.tag.Attr(":code", h.JSONString(v))
 	return b
 }
 
 func (b *CodeBuilder) Language(v string) (r *CodeBuilder) {
-	b.tag.Attr("language", v)
+	b.tag.Attr(":language", h.JSONString(v))
 	return b
 }
 
 func (b *CodeBuilder) MarshalHTML(ctx context.Context) (r []byte, err error) {
-	b.tag.Children(
-		h.Template().Text(b.code).Attr("slot", "sourcecode"),
-	)
 	return b.tag.MarshalHTML(ctx)
 }

ch/codehighlightjs/package.json

@@ -8,9 +8,10 @@
 		"lint": "vue-cli-service lint"
 	},
 	"dependencies": {
-		"core-js": "^3.15.2",
-		"vue": "^2.6.14",
-		"vue-highlightjs": "^1.3.3"
+		"@highlightjs/vue-plugin": "^1.0.2",
+		"core-js": "^3.21.0",
+		"highlight.js": "^10.7.2",
+		"vue": "^2.6.14"
 	},
 	"devDependencies": {
 		"@vue/cli-plugin-babel": "^5.0.0-beta.2",

ch/codehighlightjs/src/main.js

@@ -1,14 +1,17 @@
 import Vue from 'vue'
-import VueHighlightJS from 'vue-highlightjs'
-import 'highlight.js/styles/github.css'
 
-Vue.use(VueHighlightJS);
+import hljs from 'highlight.js/lib/core';
+import 'highlight.js/styles/stackoverflow-light.css'
+import go from 'highlight.js/lib/languages/go';
+import javascript from 'highlight.js/lib/languages/javascript';
+import hljsVuePlugin from "@highlightjs/vue-plugin";
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('go', go);
+
+Vue.use(hljsVuePlugin);
 
 (window.__goplaidVueComponentRegisters =
 	window.__goplaidVueComponentRegisters || []).push(function (Vue) {
-		Vue.component("BranCode", {
-			name: "BranCode",
-			props: ['language'],
-			template: `<pre v-highlightjs><code :class="language"><slot name="sourcecode"></slot></code></pre>`,
-		});
-	});
+	Vue.component("highlightjs", hljsVuePlugin.component);
+});

docs/hello-world.html

@@ -79,9 +79,7 @@ <h2>A new section</h2>
 
 <p>Doc of that section</p>
 
-<bran-code language='go'>
-<template slot='sourcecode'>var Hello = 123</template>
-</bran-code>
+<highlightjs :language='"go"' :code='"var Hello = 123"'></highlightjs>
 </div>
 </div>
 

docs/index.html

@@ -103,97 +103,17 @@ <h2>Getting Started</h2>
 <a href='hello-world.html'>Hello World</a>
 </p>
 
-<bran-code language='go'>
-<template slot='sourcecode'>package docsrc
-
-import (
-	. &#34;github.com/theplant/docgo&#34;
-	&#34;github.com/theplant/docgo/ch&#34;
-	. &#34;github.com/theplant/htmlgo&#34;
-)
-
-var HelloWorld = Doc(
-	Markdown(`
-## Overview
-
-Write some beautiful docs
-`),
-	Tip(&#34;This is quite important to learn&#34;),
-
-	H2(&#34;A new section&#34;),
-	P(Text(&#34;Doc of that section&#34;)),
-	ch.Code(&#34;var Hello = 123&#34;).Language(&#34;go&#34;),
-).
-	Title(&#34;Hello World&#34;).
-	AbstractText(
-		&#34;Hello world doc to describe how easy it is to create a doc&#34;,
-	)
-</template>
-</bran-code>
+<highlightjs :language='"go"' :code='"package docsrc\n\nimport (\n\t. \"github.com/theplant/docgo\"\n\t\"github.com/theplant/docgo/ch\"\n\t. \"github.com/theplant/htmlgo\"\n)\n\nvar HelloWorld = Doc(\n\tMarkdown(`\n## Overview\n\nWrite some beautiful docs\n`),\n\tTip(\"This is quite important to learn\"),\n\n\tH2(\"A new section\"),\n\tP(Text(\"Doc of that section\")),\n\tch.Code(\"var Hello = 123\").Language(\"go\"),\n).\n\tTitle(\"Hello World\").\n\tAbstractText(\n\t\t\"Hello world doc to describe how easy it is to create a doc\",\n\t)\n"'></highlightjs>
 
 <p><p>Use the following code to boot up your doc app, Suppose you have already created a <code>Home</code> Doc in docsrc package.</p>
 
-<bran-code language='go'>
-<template slot='sourcecode'>func main() {
-	port := os.Getenv(&#34;PORT&#34;)
-	if len(port) == 0 {
-		port = &#34;8800&#34;
-	}
-	fmt.Println(&#34;Starting docs at :&#34; + port)
-	http.Handle(&#34;/&#34;, docgo.New().
-		Assets(&#34;/assets/&#34;, docsrc.Assets).
-		Home(docsrc.Home).
-		Build(),
-	)
-	err := http.ListenAndServe(&#34;:&#34;+port, nil)
-	if err != nil {
-		panic(err)
-	}
-}
-</template>
-</bran-code>
+<highlightjs :language='"go"' :code='"func main() {\n\tport := os.Getenv(\"PORT\")\n\tif len(port) == 0 {\n\t\tport = \"8800\"\n\t}\n\tfmt.Println(\"Starting docs at :\" + port)\n\thttp.Handle(\"/\", docgo.New().\n\t\tAssets(\"/assets/\", docsrc.Assets).\n\t\tHome(docsrc.Home).\n\t\tBuild(),\n\t)\n\terr := http.ListenAndServe(\":\"+port, nil)\n\tif err != nil {\n\t\tpanic(err)\n\t}\n}\n"'></highlightjs>
 </p>
 <h2><a name="children-docs" class="anchor" href="#children-docs" rel="nofollow" aria-hidden="true"><span class="octicon octicon-link"></span></a>Children Docs</h2>
 
 <p>Use <code>ChildrenTable(...)</code> to put other docs into current doc page children, The doc url will reflect the hierarchy, children docs url will contain parent doc slug</p>
 
-<bran-code language='go'>
-<template slot='sourcecode'>var HelloWorldWithChildren = Doc(
-	Markdown(`
-## Overview
-
-Write some beautiful docs
-`),
-).Title(&#34;Hello World with children&#34;).
-	AbstractText(&#34;Hello world with children is to describe how to add children docs&#34;).
-	Tables(
-		ChildrenTable(
-			ContentGroup(
-				HowToSayHello,
-				HowToGoodBye,
-			).Title(&#34;Essentials&#34;),
-		),
-	)
-
-var HowToSayHello = Doc(Markdown(`
-## Say Hello
-
-Hi, There
-
-~~~go
-var Hello = true
-~~~
-
-`)).Title(&#34;How to say hello&#34;)
-
-var HowToGoodBye = Doc(Markdown(`
-## Say Good Bye
-
-Bye, There
-
-`)).Title(&#34;How to say good bye&#34;)
-</template>
-</bran-code>
+<highlightjs :language='"go"' :code='"var HelloWorldWithChildren = Doc(\n\tMarkdown(`\n## Overview\n\nWrite some beautiful docs\n`),\n).Title(\"Hello World with children\").\n\tAbstractText(\"Hello world with children is to describe how to add children docs\").\n\tTables(\n\t\tChildrenTable(\n\t\t\tContentGroup(\n\t\t\t\tHowToSayHello,\n\t\t\t\tHowToGoodBye,\n\t\t\t).Title(\"Essentials\"),\n\t\t),\n\t)\n\nvar HowToSayHello = Doc(Markdown(`\n## Say Hello\n\nHi, There\n\n~~~go\nvar Hello = true\n~~~\n\n`)).Title(\"How to say hello\")\n\nvar HowToGoodBye = Doc(Markdown(`\n## Say Good Bye\n\nBye, There\n\n`)).Title(\"How to say good bye\")\n"'></highlightjs>
 Check out this link to see how it works
 <a href='hello-world-with-children.html'>Hello World with children</a>
 </div>

docs/the-difference-with-github-flavored-markdown.html

@@ -82,19 +82,7 @@ <h2>Be aware the Go source code limitations</h2>
 <code>~</code>
 </p>
 
-<bran-code language='go'>
-<template slot='sourcecode'>var HowToSayHelloWithCodeBlock = Doc(Markdown(`
-## Say Hello
-
-Hi, There
-
-~~~
-var Hello = true
-~~~
-
-`)).Title(&#34;How to say hello with code block&#34;)
-</template>
-</bran-code>
+<highlightjs :language='"go"' :code='"var HowToSayHelloWithCodeBlock = Doc(Markdown(`\n## Say Hello\n\nHi, There\n\n~~~\nvar Hello = true\n~~~\n\n`)).Title(\"How to say hello with code block\")\n"'></highlightjs>
 Which render a page like this
 <a href='the-difference-with-github-flavored-markdown/how-to-say-hello-with-code-block.html'>How to say hello with code block</a>
 </div>

docs/use-with-htmlgo.html

@@ -71,40 +71,7 @@ <h1>Use with htmlgo</h1>
 
 <p>Take a look at this example:</p>
 
-<bran-code>
-<template slot='sourcecode'>var MarkdownDifference = Doc(
-
-	H2(&#34;Be aware the Go source code limitations&#34;),
-
-	P(
-		Text(&#34;Since it&#39;s not possible to write&#34;),
-		Code(&#34;`&#34;),
-		Text(&#34;if you are writing inside a&#34;),
-		A().Text(&#34;go raw string literals&#34;).Href(&#34;https://golang.org/ref/spec#String_literals&#34;),
-		Text(&#34;which normally used to pass in &#34;),
-		Code(&#34;Markdown&#34;),
-		Text(&#34;func, So we have to replace it with&#34;),
-		Code(&#34;~&#34;),
-	),
-	ch.Code(HowToSayHelloWithCodeBlockSample).Language(&#34;go&#34;),
-	Text(&#34;Which render a page like this&#34;),
-	DocLink(HowToSayHelloWithCodeBlock),
-).Title(&#34;The difference with Github Flavored Markdown&#34;).
-	Tables(
-		ChildrenTable(
-			ContentGroup(
-				HowToSayHelloWithCodeBlock,
-			).Title(&#34;Samples&#34;),
-		),
-
-		RelatedTable(
-			ContentGroup(
-				UseWithHtmlGo,
-			),
-		),
-	)
-</template>
-</bran-code>
+<highlightjs :language='"go"' :code='"var s = []struct {\n\tname string\n}{{name: \"123\"}}\n\nvar MarkdownDifference = Doc(\n\n\tH2(\"Be aware the Go source code limitations\"),\n\n\tP(\n\t\tText(\"Since it&#39;s not possible to write\"),\n\t\tCode(\"`\"),\n\t\tText(\"if you are writing inside a\"),\n\t\tA().Text(\"go raw string literals\").Href(\"https://golang.org/ref/spec#String_literals\"),\n\t\tText(\"which normally used to pass in \"),\n\t\tCode(\"Markdown\"),\n\t\tText(\"func, So we have to replace it with\"),\n\t\tCode(\"~\"),\n\t),\n\tch.Code(HowToSayHelloWithCodeBlockSample).Language(\"go\"),\n\tText(\"Which render a page like this\"),\n\tDocLink(HowToSayHelloWithCodeBlock),\n).Title(\"The difference with Github Flavored Markdown\").\n\tTables(\n\t\tChildrenTable(\n\t\t\tContentGroup(\n\t\t\t\tHowToSayHelloWithCodeBlock,\n\t\t\t).Title(\"Samples\"),\n\t\t),\n\n\t\tRelatedTable(\n\t\t\tContentGroup(\n\t\t\t\tUseWithHtmlGo,\n\t\t\t),\n\t\t),\n\t)\n"'></highlightjs>
 </div>
 </div>