Styles

Markugen uses a complete set of CSS styles to make your generated HTML look sleek and modern. All styles defined by Markugen (classes and IDs) are prepended with markugen- to avoid conflicts with other styles. There are, however, a few styles that do not follow this convention due to them being generated and used by extensions not developed by Markugen. For example, all styles defined for syntax highlighting of code blocks uses highlight.js which prepends its styles with hljs-.

The following stylesheet shows all of the styles that will be provided to your generated files:

markugen.template.css
html.light {
  /* Syntax highlight styles */
  --hljs-attr: #0072b5;
  --hljs-punctuation: black;
  --hljs-string: #b55a30;
  --hljs-keyword: blue;
  --hljs-number: #8b8000;
  --hljs-comment: #00a170;
  /* Markdown alert styles */
  --color-border-default: #d0d7de;
  --color-accent-fg: #0969da;
  --color-accent-emphasis: #0969da;
  --color-accent-bg: #0969da22;
  --color-danger-fg: #d1242f;
  --color-danger-emphasis: #cf222e;
  --color-danger-bg: #cf222e22;
  --color-attention-fg: #9a6700;
  --color-attention-emphasis: #9a6700;
  --color-attention-bg: #9a670022;
  --color-done-fg: #8250df;
  --color-done-emphasis: #8250df;
  --color-done-bg: #8250df22;
  --color-success-fg: #1a7f37;
  --color-success-emphasis: #1f883d;
  --color-success-bg: #1f883d22;
  /* Markugen theme */
{{ 
  let css = '';
  for (const [key, value] of Object.entries(vars.theme.light)) 
    css += `  --markugen-${key}: ${value};\n`;
  return css;
}}
}
html.dark {
  /* Syntax highlight styles */
  --hljs-attr: lightblue;
  --hljs-punctuation: #b58900;
  --hljs-string: #e9897e;
  --hljs-keyword: #0096ff;
  --hljs-number: #fdac53;
  --hljs-comment: #00a170;
  /* Markdown alert styles */
  --color-border-default: #30363d;
  --color-accent-fg: #58a6ff;
  --color-accent-emphasis: #1f6feb;
  --color-accent-bg: #1f6feb22;
  --color-danger-fg: #f85149;
  --color-danger-emphasis: #da3633;
  --color-danger-bg: #da363322;
  --color-attention-fg: #d29922;
  --color-attention-emphasis: #9e6a03;
  --color-attention-bg: #9e6a0322;
  --color-done-fg: #a371f7;
  --color-done-emphasis: #8957e5;
  --color-done-bg: #8957e522;
  --color-success-fg: #3fb950;
  --color-success-emphasis: #238636;
  --color-success-bg: #23863622;
  /* Markugen theme */
{{ 
  let css = '';
  for (const [key, value] of Object.entries(vars.theme.dark)) 
    css += `  --markugen-${key}: ${value};\n`;
  return css;
}}
}

html {
  background: var(--markugen-bgColor);
  color: var(--markugen-color);
  scrollbar-color: var(--markugen-borderColor) var(--markugen-bgColorSecondary);
  font-family: var(--markugen-fontFamily);
  --markugen-boxShadowTop: 0px -6px 16px 0px rgba(0,0,0,0.2);
  --markugen-boxShadowBottom: 0px 6px 16px 0px rgba(0,0,0,0.2);
}
body {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
a:link, a:visited {
  color: var(--markugen-accentColor);
}
h1, h2 {
  border-bottom: 1px solid var(--markugen-color);
  padding-bottom: 5px;
}
h1, h2, h3, h4, h5, h6, th, 
#markugen-navbar-title, .markugen-tab-label {
  font-family: var(--markugen-fontFamilyHeaders);
}

/* Default table styles */
table {
  border-collapse: collapse;
  text-align: center;
  border: 1px solid var(--markugen-borderColorSecondary);
}
th, td {
  border-collapse: collapse;
  padding: 5px 10px;
  border: 1px solid var(--markugen-borderColorSecondary);
}
th {
  background-color: var(--markugen-bgColorSecondary);
}

/* Utility classes */
.markugen-center {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.markugen-vheader {
  text-align: left;
}
.markugen-indent {
  position: relative;
  left: 50px;
}
.markugen-hidden {
  display: none;
}
.markugen-printable {
  display: none;
}

/* main content styles */
#markugen-body {
  min-height: 100%;
  height: 100%;
  min-width: 100%;
}
#markugen-content-row {
  display: flex;
  height: 100%;
  min-height: calc(100vh - 72px);
  margin-top: 41px;
}
#markugen-content-left, #markugen-content-right {
  flex: 1;
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  min-height: calc(100vh - 72px);
  max-height: calc(100vh - 72px);
}
#markugen-content {
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 30px;
  width: 100%;
}
#markugen-content img {
  object-fit: contain;
  max-width: 100%;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#markugen-header {
  font: bold 2em var(--markugen-fontFamilyHeaders);
  display: flex;
  align-items: center;
  justify-content: center;
}
#markugen-footer {
  background-color: var(--markugen-bgColorSecondary);
  border-top: 1px solid var(--markugen-borderColor);
  box-shadow: var(--markugen-boxShadowTop);
  width: 100%;
  max-height: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  position: fixed;
  bottom: 0px;
  left: 0px;
}

/* navbar styles */
#markugen-navbar {
  background-color: var(--markugen-bgColorSecondary);
  color: var(--markugen-color);
  border-bottom: 1px solid var(--markugen-borderColor);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 900;
  height: 40px;
  box-shadow: var(--markugen-boxShadowBottom);
}
#markugen-navbar-content {
  margin: 5px 15px;
  height: 30px;
  display: flex;
}
#markugen-navbar-menu, #markugen-navbar-toc {
  cursor: pointer;
  height: 30px;
  flex: 1;
}
#markugen-navbar-title {
  height: 30px;
  width: 100%;
  font-size: 1.5em;
  padding-left: 15px;
  padding-right: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#markugen-navbar-title > a, #markugen-navbar-title > a:visited {
  color: var(--markugen-color);
}
#markugen-navbar-title > a:hover {
  color: var(--markugen-accentColor);
}
#markugen-navbar-toolbar {
  height: 30px;
  flex: 1;
  display: flex;
  gap: 10px;
}
#markugen-theme-toggle {
  cursor: pointer;
  padding-top: 5px;
}

/* sitemap styles */
.markugen-sitemap-entry {
  padding: 5px 10px;
  border-right: 4px solid transparent;
  display: flex;
}
.markugen-sitemap-entry.active {
  color: var(--markugen-accentColor);
  border-right: 4px solid var(--markugen-accentColor);
}
.markugen-sitemap-entry.link {
  cursor: pointer;
}
.markugen-sitemap-entry.link:hover  {
  background-color: var(--markugen-accentColor);
  transition: all 1s;
}
.markugen-sitemap-title {
  width: 100%;
}
.markugen-sitemap-expander {
  flex: 1;
  cursor: pointer;
}
#markugen-sitemap-menu {
  border-right: 1px solid var(--markugen-borderColor);
  background-color: var(--markugen-bgColorSecondary);
  position: fixed;
  top: 41px;
  left: 0px;
  min-height: calc(100vh - 92px);
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  min-width: 250px;
  max-width: 250px;
}

/* table of contents styles */
#markugen-toc {
  border-left: 1px solid var(--markugen-borderColor);
  background-color: var(--markugen-bgColorSecondary);
  position: fixed;
  top: 41px;
  right: 0px;
  height: 100%;
  min-height: calc(100vh - 72px);
  max-height: calc(100vh - 72px);
  min-width: 250px;
  max-width: 250px;
}
#markugen-toc-content {
  height: 100%;
  max-height: calc(100vh - 144px);
  overflow-y: auto;
  padding-top: 5px;
  padding-bottom: 5px;
}
#markugen-toc-title {
  border-bottom: 1px solid var(--markugen-borderColor);
  min-height: 30px;
  max-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#markugen-toc-back {
  border-top: 1px solid var(--markugen-borderColor);
  min-height: 30px;
  max-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.markugen-toc-link {
  padding: 5px 10px;
  border-left: 4px solid transparent;
  cursor: pointer;
}
.markugen-toc-link:hover  {
  background-color: var(--markugen-accentColor);
  transition: all 1s;
}
.markugen-toc-link.active {
  color: var(--markugen-accentColor);
  border-left: 4px solid var(--markugen-accentColor);
}
.markugen-toc-link.active:hover {
  color: var(--markugen-color);
}

/* Tab styles */
.markugen-tabs-container {
  margin: 10px 0px;
}
.markugen-tabs {
  background-color: var(--markugen-bgColorSecondary);
  border: 1px solid var(--markugen-borderColorSecondary);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: var(--markugen-boxShadowBottom);
  display: grid;
  margin-top: -1px;
}
.markugen-tab {
  grid-column: 1;
  grid-row: 1;
  padding: 10px;
}
.markugen-tabs-labels {
  display: flex;
}
.markugen-tab-label {
  background-color: var(--markugen-bgColorSecondary);
  border: 1px solid var(--markugen-borderColorSecondary);
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 1s;
}
.markugen-tab-label.active {
  cursor: auto;
  border-bottom: none;
}
.markugen-tab-label:not(.active):hover {
  background-color: var(--markugen-accentColor);
}

/* Next and Previous styles */
#markugen-prev-next-container {
  margin-top: 25px;
  margin-bottom: 25px;
  display: flex;
  gap: 25px;
}
.markugen-prev-next {
  border: 1px solid var(--markugen-borderColor);
  background-color: var(--markugen-bgColorSecondary);
  border-radius: 10px;
  box-shadow: var(--markugen-boxShadowBottom);
  padding: 10px;
  flex: 1;
}
.markugen-prev-next:hover {
  color: var(--markugen-color);
  background-color: var(--markugen-accentColor);
  cursor: pointer;
  transition: all 1s;
}
.markugen-prev-next:hover a {
  color: var(--markugen-color);
}
.markugen-prev-next-link {
  font-size: 1.2em;
  padding-left: 5px;
  padding-right: 5px;
}
.markugen-prev-next-title {
  display: flex;
  max-width: fit-content;
  gap: 5px;
  padding-bottom: 5px;
}
.markugen-prev-next-title.next {
  margin-left: auto;
  margin-right: 0px;
}
.markugen-prev-next.next {
  text-align: right;
}

/* Code Blocks */
.markugen-code {
  margin: 10px 0px;
  max-width: fit-content;
  background-color: var(--markugen-bgColorSecondary);
	border-radius: 10px;
  border: 1px solid var(--markugen-borderColor);
  box-shadow: var(--markugen-boxShadowBottom);
}
.markugen-code-toolbar {
  display: flex;
  gap: 10px;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid var(--markugen-borderColor);
  min-height: 30px;
  max-height: 30px;
}
.markugen-code-title {
  flex: 1;
}
.markugen-code-copy, .markugen-code-save {
  cursor: pointer;
}
.markugen-code-content {
  padding: 10px;
  margin: 0px;
  white-space: pre-wrap;
  max-height: var(--markugen-codeMaxHeight);
  width: fit-content;
  max-width: 100%;
  overflow: auto;
}
:not(pre) > code {
  background-color: var(--markugen-bgColorSecondary);
	border-radius: 0.33em;
  padding-left: 0.33em;
  padding-right: 0.33em;
}

/* Syntax highlighter */
.hljs-attr, .hljs-attribute {
  color: var(--hljs-attr);
}
.hljs-punctuation {
  color: var(--hljs-punctuation);
}
.hljs-string, .hljs-selector-class, .hljs-selector-pseudo {
  color: var(--hljs-string);
}
.hljs-keyword, .hljs-literal, .hljs-built_in, 
.hljs-section, .hljs-selector-tag, .hljs-meta {
  color: var(--hljs-keyword);
}
.hljs-link, .hljs-selector-id {
  color: var(--markugen-accentColor);
}
.hljs-number, .hljs-title {
  color: var(--hljs-number);
}
.hljs-comment, .hljs-quote {
  color: var(--hljs-comment);
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: bold;
}

/* Markdown alerts */
.markdown-alert {
  border: 1px solid var(--borderColor-default, var(--color-border-default));
  color: inherit;
 	border-radius: 10px;
  padding: 0px 10px 10px 10px;
  font-size: 1.1em;
  margin-top: 10px;
  margin-bottom: 10px;
  box-shadow: var(--markugen-boxShadowBottom);
}
.markdown-alert>:last-child {
  margin-bottom: 0!important
}
.markdown-alert .markdown-alert-title {
  align-items: center;
  display: flex;
  line-height: 1;
  text-transform: capitalize;
}
.markdown-alert .markdown-alert-title svg.octicon {
  margin-right: 8px!important;
  margin-right: var(--base-size-8,8px) !important;
  fill: currentColor;
}
.markdown-alert.markdown-alert-note {
  border-color: var(--borderColor-accent-emphasis,var(--color-accent-emphasis));
  background-color: var(--color-accent-bg);
}
.markdown-alert.markdown-alert-note .markdown-alert-title {
  color: var(--color-accent-fg);
  color: var(--fgColor-accent,var(--color-accent-fg))
}
.markdown-alert.markdown-alert-tip {
  border-color: var(--borderColor-success-emphasis,var(--color-success-emphasis));
  background-color: var(--color-success-bg);
}
.markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: var(--color-success-fg);
  color: var(--fgColor-success,var(--color-success-fg))
}
.markdown-alert.markdown-alert-important {
  border-color: var(--borderColor-done-emphasis,var(--color-done-emphasis));
  background-color: var(--color-done-bg);
}
.markdown-alert.markdown-alert-important .markdown-alert-title {
  color: var(--color-done-fg);
  color: var(--fgColor-done,var(--color-done-fg))
}
.markdown-alert.markdown-alert-warning {
  border-color: var(--borderColor-attention-emphasis,var(--color-attention-emphasis));
  background-color: var(--color-attention-bg);
}
.markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: var(--color-attention-fg);
  color: var(--fgColor-attention,var(--color-attention-fg))
}
.markdown-alert.markdown-alert-caution {
  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis));
  background-color: var(--color-danger-bg);
}
.markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: var(--color-danger-fg);
  color: var(--fgColor-danger,var(--color-danger-fg))
}

/* styles when printing */
@media print {
  body {
    color: black !important;
    background-color: white !important;
    box-shadow: none !important;
    border-color: black !important;
  }
  h1, h2 {
    border-bottom: 1px solid black !important;
  }
  #markugen-content-row {
    height: 100% !important;
    min-height: 100% !important;
    margin: 0px 0px !important;
  }
  #markugen-content {
    padding: 0px 0px !important;
    margin: 0px 0px !important;
    max-width: 100% !important;
    color: black !important;
    background-color: white !important;
  }
  #markugen-footer {
    position: static !important;
    color: black !important;
    background-color: white !important;
    box-shadow: none !important;
    border-top: 1px solid black !important;
  }
  table {
    border-color: black !important;
    color: black !important;
  }
  th, td {
    border-color: black !important;
  }
  th {
    background-color: lightgrey !important;
  }
  .markugen-tab-label {
    border: 1px solid black !important;
    border-top-right-radius: 10px !important;
    border-top-left-radius: 10px !important;
  } 
  .markugen-tab {
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    border-bottom: 1px solid black !important;
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
  }
  .markdown-alert {
    box-shadow: none !important;
  }
  .markugen-code {
    box-shadow: none !important;
  }
  .markugen-code-content {
    max-height: max-content !important;
  }
  .markugen-printable {
    display: block !important;
  }
  .markugen-not-printable {
    display: none !important;
  }
}

Note

The file is a template and has a couple of special template parameters in it: {{ ... }}. These values will be replaced with the default colors or those provided to Markugen upon configuration.

Custom Styles

All of the default styles can be overridden by providing styles or css to Markugen's options upon creation. The provided styles will always be placed after Markugen's styles to ensure you can override them.

The site's theme colors and fonts can be provided via Markugen's options without the need for providing your own CSS stylesheet.