Nachos Pillage Milwaukee


    2.0.9 • Public • Published

    Craft Documentation Theme for VuePress

    This is the VuePress theme used for Craft CMS documentation.

    It makes the following changes over the default VuePress theme:

    • Adds support for code language toggles and split page views.
    • Disables interpolation for all inline <code> tags.
    • Improves <table> styling.
    • Adds themeConfig options to tweak sidebar sizing: smallerSidebarHeadings and widerSidebar. (Each false by default.)


    1. Install VuePress like normal

    2. Require this theme

      yarn add -D vuepress-theme-craftdocs # or npm install -D vuepress-theme-craftdocs
    3. Set these things in .vuepress/config.js:

      module.exports = {
        // ...
        theme: "craftdocs",
        themeConfig: {
          // ...
          codeLanguages: {
            php: "PHP",
            twig: "Twig",
            // any other code language labels you want to include in code toggles...
        markdown: {
          anchor: { level: [2, 3] },
          extendMarkdown(md) {
            let markup = require("vuepress-theme-craftdocs/markup");

    Code Toggles

    You can create code toggles by wrapping multiple fenced code blocks with a code container:

    ::: code
    echo "Hey, $name";
    Hey, {{ name }}

    By default, toggle labels will be pulled from the value in themeConfig.codeLanguages that matches the code block’s language. If you want to provide a custom label instead, just type it after the code block language:

    ::: code
    ```php Craft 2
    $success = craft()->entries->saveEntry($entry);
    ```php Craft 3
    $success = Craft::$app->elements->saveElement($entry);

    Split Views

    You can create split view pages by adding split: true to your page’s frontmatter:

    split: true

    In split view, any content that contains a horizontal rule (---) will be divided into left and right portions, starting and ending at the closest H2/H3 headings.

    ## Cool Headings
    Left-side content
    Right-side content

    In split view, code toggles can share a single page-wide toggle UI, floated at the top of the right-hand content pane. To do this, add a code list to your page’s frontmatter:

    split: true
      - php
      - twig

    (Use the same language handles defined by themeConfig.codeLanguages in .vuepress/config.js.)

    Upgrading from v1.3.x

    1. Follow the VuePress Migration from 0.x guide.
    2. Update any custom styles that relied on .content to reference .theme-default-content instead.
    3. If you’re using Algolia DocSearch, make sure your index configuration’s selectors are still valid.




    npm i vuepress-theme-craftdocs

    DownloadsWeekly Downloads






    Unpacked Size

    50.4 kB

    Total Files


    Last publish


    • brandonkelly
    • mattstein