feat(html): new css styling

5 files changed, 46 insertions, 16 deletions

diff --git a/content/posts/001.md b/content/posts/001.md
index 48ea720..fe1e680 100644
--- a/content/posts/001.md
+++ b/content/posts/001.md
@@ -10,15 +10,21 @@ tags: posts
 6. goto 2.
 
 ## cpuprofile
-`go test -test=XXX -bench <regex> -cpuprofile <file>`
+```shell
+go test -test=XXX -bench <regex> -cpuprofile <file>
+```
 
 ## memprofile
-`go test -test=XXX -bench <regex> -memprofile <file> -benchmem`
+```shell
+go test -test=XXX -bench <regex> -memprofile <file> -benchmem
+```
 
 ## pprof 
 [pprof usage](https://github.com/google/pprof/blob/main/doc/README.md)
 
-`go pprof -http=:8080 profile.pb.gz`
+```shell
+go pprof -http=:8080 profile.pb.gz
+```
 will show a web UI for analysing the profile.
 
 ### views:
diff --git a/html/highlight.go b/html/highlight.go
index 72b8d79..7f520ed 100644
--- a/html/highlight.go
+++ b/html/highlight.go
@@ -19,10 +19,10 @@ type Highlighter struct {
 }
 
 func (h Highlighter) htmlHighlight(w io.Writer, source, lang, defaultLang string) error {
-
 	if lang == "" {
 		lang = defaultLang
 	}
+
 	l := lexers.Get(lang)
 	if l == nil {
 		l = lexers.Analyse(source)
@@ -55,9 +55,7 @@ func (h Highlighter) myRenderHook(w io.Writer, node ast.Node, entering bool) (as
 
 func newRenderer() *mdhtml.Renderer {
 	htmlFormatter := html.New(html.WithClasses(true), html.TabWidth(2))
-	if htmlFormatter == nil {
-		panic("couldn't create html formatter")
-	}
+
 	styleName := "monokailight"
 	highlightStyle := styles.Get(styleName)
 	if highlightStyle == nil {
diff --git a/html/html.go b/html/html.go
index 8b088a7..0671557 100644
--- a/html/html.go
+++ b/html/html.go
@@ -8,13 +8,7 @@ import (
 func MDToHTML(md []byte) []byte {
 	extensions := parser.CommonExtensions | parser.AutoHeadingIDs | parser.NoEmptyLineBeforeBlock
 	p := parser.NewWithExtensions(extensions)
-	// doc := p.Parse(md)
 
-	// htmlFlags := html.CommonFlags
-	// opts := html.RendererOptions{Flags: htmlFlags}
-	// renderer := html.NewRenderer(opts)
-
-	// return markdown.Render(doc, renderer)
 	renderer := newRenderer()
 	return markdown.ToHTML(md, p, renderer)
 }
diff --git a/public/static/styles.css b/public/static/styles.css
index 432e497..71afb96 100644
--- a/public/static/styles.css
+++ b/public/static/styles.css
@@ -1,5 +1,21 @@
 /* Background */ .bg { background-color: #ffffff; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2 }
-/* PreWrapper */ .chroma { background-color: #ffffff; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; overflow: scroll}
+/* PreWrapper */ .chroma { 
+    background-color: #ffffff; 
+    -moz-tab-size: 2; 
+    -o-tab-size: 2; 
+    tab-size: 2; 
+    margin: 2em;
+    padding: 3em 5em 3em 2em;
+    box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
+    border-radius: 7px;
+    border: 2px solid black;
+    /*wrap lines in code blocks*/
+    white-space: pre-wrap;       /* Since CSS 2.1 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
 /* Error */ .chroma .err { color: #000000 }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
diff --git a/templates/layouts/_default.html b/templates/layouts/_default.html
index ada283c..0762919 100644
--- a/templates/layouts/_default.html
+++ b/templates/layouts/_default.html
@@ -17,16 +17,31 @@
 			font-weight: normal;
 			font-style: normal;
 		}
+
+		code:not(pre > code) {
+			background-color: #f0f0f0;
+			padding: 0.2em 0.4em;
+			border-radius: 3px;
+		}
+
+		blockquote {
+			border-left: 2px solid #000000;
+			padding-left: 10px;
+		}
+
 		code {
 			font-family: "Mono";
 		}
+
 		h1 {
 			margin-bottom: 0;
 		}
+
 		body {
 			max-width: 70ch;
 			font-family: "Mono";
 		}
+
 		nav ul {
 			display: flex;
 			list-style: none;
@@ -53,9 +68,10 @@
 	</nav>
 	{{ template "content" . }}
 	<footer>
-		<br />​<hr />​​​​​​​​​​​​​​​​​​​<br />​​​​​
+		<br />​
+		<hr />​​​​​​​​​​​​​​​​​​​<br />​​​​​
 		<p>see something you disagree with? email: <a href="mailto:[email protected]">[email protected]</a></p>
-	  </footer> 
+	</footer>
 </body>
 
 </html>