Commit f987dd97 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Add proper syntax highlighting with colours based on variables

Closes #48
parent 3f23e3c6
......@@ -2,6 +2,7 @@ baseURL = "https://laurakalbag.com"
languageCode = "en-GB"
title = "Laura Kalbag"
theme = "static-kalbag"
pygmentsUseClasses = true
[author]
name = "Laura Kalbag"
email = "hi@laurakalbag.com"
......@@ -15,14 +16,14 @@ theme = "static-kalbag"
twitter = "laurakalbag"
facebook = "laurakalbag"
[imaging]
# Default resample filter used for resizing. Default is Box,
# a simple and fast averaging filter appropriate for downscaling.
# See https://github.com/disintegration/imaging
resampleFilter = "Gaussian"
# Default JPEG quality setting. Default is 75.
quality = 100
# Anchor used when cropping pictures.
# Default is "smart" which does Smart Cropping, using https://github.com/muesli/smartcrop
# Smart Cropping is content aware and tries to find the best crop for each image.
# Valid values are Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
anchor = "smart"
\ No newline at end of file
# Default resample filter used for resizing. Default is Box,
# a simple and fast averaging filter appropriate for downscaling.
# See https://github.com/disintegration/imaging
resampleFilter = "Gaussian"
# Default JPEG quality setting. Default is 75.
quality = 100
# Anchor used when cropping pictures.
# Default is "smart" which does Smart Cropping, using https://github.com/muesli/smartcrop
# Smart Cropping is content aware and tries to find the best crop for each image.
# Valid values are Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
anchor = "smart"
\ No newline at end of file
......@@ -54,12 +54,12 @@ It took a long time to get my head around page bundles. The Hugo documentation c
So, to put my blog posts in page bundle hierarchy, where its images could be used as resources, I had to restructure them to match the following pattern:
{{< highlight markdown >}}
```
/processing-responsive-images-with-hugo
- index.md
- screenshot.jpg
- screenshot2.jpg
{{< /highlight >}}
```
If you name your page `_index.md`, the images will not register as page resources, the image processing will not work. I lost an hour to that, I hope you don’t!
......@@ -81,7 +81,7 @@ This will output the final HTML, resizing `theonion.jpg` into three sizes, 500px
{{< highlight html >}}
<img sizes="(min-width: 35em) 1200px, 100vw"
srcset="/you-wont-believe-what-happens-next/006_hua7a82b7ab3c199a5d03fc2f0c814946c_472240_500x0_resize_q100_gaussian.jpg 500w, /you-wont-believe-what-happens-next/006_hua7a82b7ab3c199a5d03fc2f0c814946c_472240_800x0_resize_q100_gaussian.jpg 800w, /you-wont-believe-what-happens-next/006_hua7a82b7ab3c199a5d03fc2f0c814946c_472240_1200x0_resize_q100_gaussian.jpg 1200w" src="/you-wont-believe-what-happens-next/006_hua7a82b7ab3c199a5d03fc2f0c814946c_472240_1200x0_resize_q100_gaussian.jpg"
srcset="/you-wont-believe-what-happens-next/006__472240_500x0_resize_q100_gaussian.jpg 500w, /you-wont-believe-what-happens-next/006__472240_800x0_resize_q100_gaussian.jpg 800w, /you-wont-believe-what-happens-next/006__472240_1200x0_resize_q100_gaussian.jpg 1200w" src="/you-wont-believe-what-happens-next/006__472240_1200x0_resize_q100_gaussian.jpg"
alt="Screenshot of the Onion homepage">
{{< /highlight >}}
......@@ -90,7 +90,7 @@ This will output the final HTML, resizing `theonion.jpg` into three sizes, 500px
Using the shortcode code:
`layouts/shortcodes/img.html`:
{{< highlight go >}}
{{< highlight go-html-template >}}
{{/* get file that matches the filename as specified as src="" in shortcode */}}
{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
......@@ -161,10 +161,10 @@ I’ve also included CSS that uses the `grid` and `two` class names to lay out t
{{< highlight html >}}
<figure class="grid two">
<img sizes="(min-width: 35em) 1200px, 100vw" srcset="
/photos/5/osky-1_hue1127f699de9d07d4014b30bcd236c11_694081_500x0_resize_q100_gaussian.jpg 500w, /photos/5/osky-1_hue1127f699de9d07d4014b30bcd236c11_694081_800x0_resize_q100_gaussian.jpg 800w" src="/photos/5/osky-1_hue1127f699de9d07d4014b30bcd236c11_694081_1200x0_resize_q100_gaussian.jpg"
/photos/5/osky-1__500x0_resize_q100_gaussian.jpg 500w, /photos/5/osky-1__800x0_resize_q100_gaussian.jpg 800w" src="/photos/5/osky-1__1200x0_resize_q100_gaussian.jpg"
alt="Selfie of me and Oskar the huskamute, he’s looking at me.">
<img sizes="(min-width: 35em) 1200px, 100vw" srcset="/photos/5/osky-2_hu134a8841c4b5d9e756df23965ed25486_687491_500x0_resize_q100_gaussian.jpg 500w, /photos/5/osky-2_hu134a8841c4b5d9e756df23965ed25486_687491_800x0_resize_q100_gaussian.jpg 800w"
src="/photos/5/osky-2_hu134a8841c4b5d9e756df23965ed25486_687491_1200x0_resize_q100_gaussian.jpg"
<img sizes="(min-width: 35em) 1200px, 100vw" srcset="/photos/5/osky-2__500x0_resize_q100_gaussian.jpg 500w, /photos/5/osky-2__800x0_resize_q100_gaussian.jpg 800w"
src="/photos/5/osky-2__1200x0_resize_q100_gaussian.jpg"
alt="Selfie of me and Oskar the huskamute, he’s licking my face.">
<figcaption>
<p>Inevitable</p>
......@@ -178,7 +178,7 @@ Using the shortcode code:
`layouts/shortcodes/figure.html`:
{{< highlight go >}}
{{< highlight go-html-template >}}
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
{{.Inner}}
<figcaption>
......@@ -206,7 +206,7 @@ Nesting that many brackets makes it way too easy to make typos, so I just made a
{{< /highlight >}}
Using this shortcode `layouts/shortcodes/link.html`:
{{< highlight html >}}
{{< highlight go-html-template >}}
<a {{ with .Get "href" }}href="{{.}}"{{ end }}>
{{.Inner}}
</a>
......
......@@ -14,6 +14,7 @@
<meta name="author" content="{{ .Site.Params.publisher }}">
<link href='{{ "css/style.css" | relURL }}' rel='stylesheet' type="text/css" />
<link href='{{ "css/syntax.css" | relURL }}' rel='stylesheet' type="text/css" />
{{- partial "palette.html" . -}}
{{- block "favicon" . -}}
......
......@@ -298,7 +298,7 @@ em {
code {
font-family: var(--font-family-code);
/* give Overpass monospace font same x-height as Informative */
font-size: 0.95em;
font-size: 0.95em;
}
ul, ol {
......@@ -330,6 +330,8 @@ pre {
word-break: break-all;
word-break: break-word;
border: none;
/* make font slightly smaller for boxed code */
font-size: 0.9em;
margin: 1em 0;
max-width: calc(var(--max-width)*1.195);
overflow-x: scroll;
......
/* Background */
.chroma { color: hsl(var(--primary-bg)); background-color: hsl(var(--text)); }
/* Error */
.chroma .err { color: #FF8080; background-color: hsl(var(--darklinktext)) }
/* LineTableTD */
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
/* LineHighlight */
.chroma .hl { display: block; width: 100%; background-color: hsl(var(--tab-two)) }
/* LineNumbersTable */
.chroma .lnt { margin-right: var(--layout-unit); padding: 0 var(--layout-unit) 0 var(--layout-unit); }
/* LineNumbers */
.chroma .ln { margin-right: var(--layout-unit); padding: 0 var(--layout-unit) 0 var(--layout-unit); }
/* Keyword */
.chroma .k { color: rgba(255,255,255,0.7) }
/* KeywordConstant */
.chroma .kc { color: rgba(255,255,255,0.7) }
/* KeywordDeclaration */
.chroma .kd { color: rgba(255,255,255,0.7) }
/* KeywordNamespace */
.chroma .kn { color: hsl(var(--tab-three)) }
/* KeywordPseudo */
.chroma .kp { color: rgba(255,255,255,0.7) }
/* KeywordReserved */
.chroma .kr { color: rgba(255,255,255,0.7) }
/* KeywordType */
.chroma .kt { color: rgba(255,255,255,0.7) }
/* NameAttribute */
.chroma .na { color: hsl(var(--tab-two)) }
/* NameClass */
.chroma .nc { color: hsl(var(--tab-two)) }
/* NameConstant */
.chroma .no { color: rgba(255,255,255,0.7) }
/* NameDecorator */
.chroma .nd { color: hsl(var(--tab-two)) }
/* NameException */
.chroma .ne { color: hsl(var(--tab-two)) }
/* NameFunction */
.chroma .nf { color: hsl(var(--tab-two)) }
/* NameOther */
.chroma .nx { color: hsl(var(--tab-two)) }
/* NameTag */
.chroma .nt { color: hsl(var(--tab-three)) }
/* Literal */
.chroma .l { color: rgba(255,255,255,0.8) }
/* LiteralDate */
.chroma .ld { color: rgba(255,255,255,0.6) }
/* LiteralString */
.chroma .s { color: hsl(var(--secondary-bg)) }
/* LiteralStringAffix */
.chroma .sa { color: hsl(var(--secondary-bg)) }
/* LiteralStringBacktick */
.chroma .sb { color: hsl(var(--secondary-bg)) }
/* LiteralStringChar */
.chroma .sc { color: hsl(var(--secondary-bg)) }
/* LiteralStringDelimiter */
.chroma .dl { color: hsl(var(--secondary-bg)) }
/* LiteralStringDoc */
.chroma .sd { color: hsl(var(--secondary-bg)) }
/* LiteralStringDouble */
.chroma .s2 { color: hsl(var(--secondary-bg)) }
/* LiteralStringEscape */
.chroma .se { color: rgba() }
/* LiteralStringHeredoc */
.chroma .sh { color: hsl(var(--secondary-bg)) }
/* LiteralStringInterpol */
.chroma .si { color: hsl(var(--secondary-bg)) }
/* LiteralStringOther */
.chroma .sx { color: hsl(var(--secondary-bg)) }
/* LiteralStringRegex */
.chroma .sr { color: hsl(var(--secondary-bg)) }
/* LiteralStringSingle */
.chroma .s1 { color: hsl(var(--secondary-bg)) }
/* LiteralStringSymbol */
.chroma .ss { color: hsl(var(--secondary-bg)) }
/* LiteralNumber */
.chroma .m { color: rgba() }
/* LiteralNumberBin */
.chroma .mb { color: rgba() }
/* LiteralNumberFloat */
.chroma .mf { color: rgba() }
/* LiteralNumberHex */
.chroma .mh { color: rgba() }
/* LiteralNumberInteger */
.chroma .mi { color: rgba() }
/* LiteralNumberIntegerLong */
.chroma .il { color: rgba() }
/* LiteralNumberOct */
.chroma .mo { color: rgba() }
/* Operator */
.chroma .o { color: hsl(var(--tab-three)) }
/* OperatorWord */
.chroma .ow { color: hsl(var(--tab-three)) }
/* Comment */
.chroma .c { color: hsl(var(--tab-four)); }
/* CommentHashbang */
.chroma .ch { color: hsl(var(--tab-four)); }
/* CommentMultiline */
.chroma .cm { color: hsl(var(--tab-four)); }
/* CommentSingle */
.chroma .c1 { color: hsl(var(--tab-four)); }
/* CommentSpecial */
.chroma .cs { color: hsl(var(--tab-four)); }
/* CommentPreproc */
.chroma .cp { color: hsl(var(--tab-four)); }
/* CommentPreprocFile */
.chroma .cpf { color: hsl(var(--tab-four)); }
/* GenericDeleted */
.chroma .gd { color: hsl(var(--tab-three)) }
/* GenericEmph */
.chroma .ge { font-style: italic }
/* GenericInserted */
.chroma .gi { color: hsl(var(--tab-two)) }
/* GenericStrong */
.chroma .gs { font-weight: bold }
/* GenericSubheading */
.chroma .gu { color: hsl(var(--tab-four)); }
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment