Zensical Configuration¶

Main Configuration¶

Snippet

zensical.toml

# ============================================================================
#
# This is a condensed version of the default configuration for Zensical.
# Mainly it removes the comments and unused options. 
# It also contains minor tweaks for consistency with my other sites.
#
# ============================================================================

# ----------------------------------------------------------------------------
#  General Project Settings
# ----------------------------------------------------------------------------

[project]

site_name = "<SITE_NAME>"
site_description = "<SITE_DESCRIPTION>"
site_author = "<AUTHOR>"
site_url = "<SITE_URL>"
copyright = """
Copyright &copy; <AUTHOR>
"""

# Define a custom navigation in case you want to override the autogenerated one.
# 
# nav = [
#   { "Get started" = "index.md" },
#   { "Markdown in 5min" = "markdown.md" },
# ]

extra_css = ["assets/style.css"]
#extra_javascript = ["assets/extra.js"]

# ----------------------------------------------------------------------------
#  Theme Settings
# ----------------------------------------------------------------------------
[project.theme]

favicon = "assets/logo.svg"
logo = "assets/logo.svg"

language = "en"

features = [
    "announce.dismiss",
    "content.code.annotate",
    "content.code.copy",
    "content.code.select",
    "content.footnote.tooltips",
    "content.tabs.link",
    "content.tooltips",
    "navigation.footer",
    "navigation.indexes",
    "navigation.instant",
    "navigation.instant.prefetch",
    "navigation.path",
    "navigation.sections",
    "navigation.tabs",
    "navigation.top",
    "navigation.tracking",
    "search.highlight",
    # "navigation.instant.progress",
    # "navigation.prune",
    # "navigation.tabs.sticky",
    # "header.autohide",
    # "navigation.expand",
    # "toc.follow",
    # "toc.integrate",
]

[[project.theme.palette]]
media = "(prefers-color-scheme: light)"
scheme = "default"
toggle.icon = "lucide/sun"
toggle.name = "Switch to dark mode"
primary = "purple"
accent = "purple"

[[project.theme.palette]]
media = "(prefers-color-scheme: dark)"
scheme = "slate"
toggle.icon = "lucide/moon"
toggle.name = "Switch to light mode"
primary = "purple"
accent = "purple"

# ----------------------------------------------------------------------------
#  Markdown Extensions
# ----------------------------------------------------------------------------

[project.markdown_extensions.abbr]
[project.markdown_extensions.admonition]
[project.markdown_extensions.attr_list]
[project.markdown_extensions.def_list]
[project.markdown_extensions.footnotes]
[project.markdown_extensions.md_in_html]
[project.markdown_extensions.toc]
permalink = true
[project.markdown_extensions.pymdownx.arithmatex]
generic = true
[project.markdown_extensions.pymdownx.betterem]
[project.markdown_extensions.pymdownx.caret]
[project.markdown_extensions.pymdownx.details]
[project.markdown_extensions.pymdownx.emoji]
emoji_generator = "zensical.extensions.emoji.to_svg"
emoji_index = "zensical.extensions.emoji.twemoji"
[project.markdown_extensions.pymdownx.highlight]
anchor_linenums = true
line_spans = "__span"
pygments_lang_class = true
[project.markdown_extensions.pymdownx.inlinehilite]
[project.markdown_extensions.pymdownx.keys]
[project.markdown_extensions.pymdownx.magiclink]
[project.markdown_extensions.pymdownx.mark]
[project.markdown_extensions.pymdownx.smartsymbols]
[project.markdown_extensions.pymdownx.superfences]
custom_fences = [
{ name = "mermaid", class = "mermaid", format = "pymdownx.superfences.fence_code_format" }
]
[project.markdown_extensions.pymdownx.tabbed]
alternate_style = true
combine_header_slug = true
[project.markdown_extensions.pymdownx.tasklist]
custom_checkbox = true
[project.markdown_extensions.pymdownx.tilde]

Styling¶

Snippet

style.css

* {
    /* Use theme colors for code highlighting */
    --md-code-hl-color: var(--md-accent-fg-color);
    --md-code-hl-color--light: var(--md-accent-fg-color--transparent);
    --md-code-hl-keyword-color: var(--md-accent-fg-color);
}

/* Colorize the navigation subheadings for better contrast */
.md-nav__item--section > label.md-nav__link .md-ellipsis {
    color: var(--md--accent-fg-color);
}