Closed powersj closed 3 weeks ago
I solved this and custom font weight by editing a copy of css.html
in /layouts/partials/
to this:
<style>
html body {
font-family: '{{ .Site.Params.font }}', sans-serif;
background-color: {{ .Site.Params.backgroundColor | default "white" }};
}
:root {
--accent: {{ .Site.Params.accent | default "#2196F3" }};
--border-width: {{ if .Site.Params.showBorder | default false }} 5px {{ else }} 0 {{ end }};
}
</style>
<!-- main -->
<link rel="stylesheet" href="{{ "css/main.css" | absURL }}">
<!-- custom -->
{{ range .Site.Params.css }} <link rel="stylesheet" href="{{ . | absURL }}"> {{ end }}
<!-- google fonts -->
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{ .Site.Params.font }}">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{ .Site.Params.font }}{{ if .Site.Params.fontweight }}:{{ .Site.Params.fontweight }}{{ end }}">
+ {{ if .Site.Params.codefont }} <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{ .Site.Params.codefont }}"> {{ end }}
<!-- highlight.js -->
{{ if .Site.Params.highlight | default false }} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/{{ .Site.Params.highlightStyle | default "default" }}.min.css"> {{ end }}
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- font awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+ {{ if .Site.Params.codefont }}
+ <style>
+
+ code, kbd, pre, samp {
+ font-family: '{{ .Site.Params.codefont }}', monospace;
+ }
+
+ </style>
+ {{ end }}
I can add a custom code font using i.e. codefont = "Source Code Pro"
and a custom font weight using i.e. fontweight = "600"
in config.toml
.
Thanks for that!
It would be really nice to be able to have a configurable option for the code font in config.toml:
It appears that inline code (e.g. "Run
whoami
at the prompt") uses code blocks around whoami. Larger blocks of code use code blocks as well, but the highlight.js class needed to be used as well. I had success with the following in my own custom.css:Is there a better way to do this? Thoughts?