Options

Markugen comes with a set of options that can be provided when constructing a new instance of Markugen. The following output shows all the available options:

markugenoptions.ts

/**
 * Markugen configuration options
 */
export interface MarkugenOptions 
{
  /**
   * The path to the Chrome or Firefox executable. This is only required if {@link pdf}
   * is true and Markugen is unable to locate the executable.
   */
  browser?:string,
  /**
   * Be very careful with this option as it turns off the use of a sandbox
   * when running chrome. This should only be necessary when running in a
   * container. [default: true]
   */
  sandbox?:boolean,
  /**
   * If true, console output will be colored, else it will not
   */
  color?:boolean,
  /**
   * If true, markugen will silence its output
   */
  quiet?:boolean,
  /**
   * Used internally to show full call stacks when an uncaught exception occurs
   */
  debug?:boolean,
  /**
   * Used internally to tell Markugen if it was executed from the cli or not
   */
  cli?:boolean,
}

Themes

The theme options give the developer the opportunity to provide a set of colors and fonts for light and dark mode. Any values that are not provided will be set to the default Markugen colors and fonts. The values for each of the theme options are strings and should be valid CSS values for colors or fonts.

Tip

If you would like to override styles other than the theme, please refer to the section on styles.

The following output shows the available theme settings that can be supplied as options to Markugen:

theme.ts
/**
 * Theme options
 */
export default interface Theme 
{
  /**
   * Primary text color
   */
  color?:string,
  /**
   * Secondary text color used on backgrounds
   */
  colorSecondary?:string,
  /**
   * Primary background color
   */
  bgColor?:string,
  /**
   * Secondary background color
   */
  bgColorSecondary?:string,
  /**
   * Primary color for borders
   */
  borderColor?:string,
  /**
   * Secondary color for borders
   */
  borderColorSecondary?:string,
  /**
   * Accent color used on links and alike
   */
  accentColor?:string,
  /**
   * Font family used for the sites text
   */
  fontFamily?:string,
  /**
   * Font family used for the title/heading text
   */
  fontFamilyHeaders?:string,
  /**
   * Maximum height of code blocks
   */
  codeMaxHeight?:string,
}

By default, Markugen provides a set of styles for each theme. The following output shows the default values used by Markugen when not overridden:

themes.ts
import Theme from './theme';
export { default as Theme } from './theme';

/**
 * Light and dark themes
 */
export interface Themes 
{
  /**
   * Theme used for light mode
   */
  light?:Theme,
  /**
   * Theme used for dark mode
   */
  dark?:Theme,
}

/**
 * The default light and dark themes used by Markugen
 */
export const defaultThemes:Themes = {
  light: {
    color: 'black',
    colorSecondary: 'black',
    bgColor: 'white',
    bgColorSecondary: '#e5e4e2',
    borderColor: '#c0c0c0',
    borderColorSecondary: 'black',
    accentColor: '#1f6feb',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", STHeiti, "Microsoft YaHei", SimSun, sans-serif',
    fontFamilyHeaders: 'Georgia Pro, Crimson, Georgia, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", STHeiti, "Microsoft YaHei", SimSun, sans-serif',
    codeMaxHeight: '500px',
  },
  dark: {
    color: 'white',
    colorSecondary: 'silver',
    bgColor: '#423f3e',
    bgColorSecondary: '#2b2b2b',
    borderColor: '#404040',
    borderColorSecondary: 'silver',
    accentColor: '#a371f7',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", STHeiti, "Microsoft YaHei", SimSun, sans-serif',
    fontFamilyHeaders: 'Georgia Pro, Crimson, Georgia, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", STHeiti, "Microsoft YaHei", SimSun, sans-serif',
    codeMaxHeight: '500px',
  }
};

The default colors used when no theme options are provided can be seen on this website. Additionally, you are welcome to view the generated CSS file here.