Fix rendering when the syntaxHighlight plugin is not installed

6e9596ab04972d3ae6fd5a02e33a32f04e637253

Tucker McKnight <tmcknight@instructure.com> | Mon Jul 20 2026

Fix rendering when the syntaxHighlight plugin is not installed

When syntax highlighting isn't available, it needs to return an escaped
string with pre tags around it. This means it will show whitespace in
plain text, and also *not* render HTML components on the page when it
should be just showing the HTML code.

Fix the path to CSS and JS files, which wasn't working when using a root
path before.

I've removed the call to eleventyConfig.addTemplateFormats("js"), which didn't
seem to be doing anything. I had to add eleventyConfig.addTemplateFormats("11ty.js")
to the site using this plugin for it to work -- maybe add that instead?

Add a todo about not including the prism css file if it's not being used. Also,
need to allow users to provide their own prism file.
js_templates/common/commonPage.ts:12
Before
11
12
13
14
15
16
17
18
          m('meta', {charset: "utf-8"}),
          m('meta', {name: "viewport", content: "width=device-width, initial-scale=1"}),
          m('title', opts.pageTitle),
          m('link', {rel: "stylesheet", href: "/css/design-board.css"}),
          opts.additionalHeadContent || null,
          m('script', {src: `${opts.rootPath}frontend/top.js`}),
        ]),
        m('body', [
          m('div', {class: "container-fluid container-lg"}, [
After
11
12
13
14
15
16
17
18
          m('meta', {charset: "utf-8"}),
          m('meta', {name: "viewport", content: "width=device-width, initial-scale=1"}),
          m('title', opts.pageTitle),
          m('link', {rel: "stylesheet", href: `${opts.rootPath}/css/design-board.css`}),
          opts.additionalHeadContent || null,
          m('script', {src: `${opts.rootPath}/frontend/top.js`}),
        ]),
        m('body', [
          m('div', {class: "container-fluid container-lg"}, [
js_templates/common/commonPage.ts:61
Before
60
61
62
63
64
65
            integrity: "sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI",
            crossorigin: "anonymous"
          }),
          m('script', {src: `${opts.rootPath}frontend/main-frontend.bundle.js`})
        ])
      ])
    ])
After
60
61
62
63
64
65
            integrity: "sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI",
            crossorigin: "anonymous"
          }),
          m('script', {src: `${opts.rootPath}/frontend/main-frontend.bundle.js`})
        ])
      ])
    ])
js_templates/common/htmlPage.ts:46
Before
45
46
47


48
49
        window.currentRefType = "${data.currentRefType}";
        window.cloneUrl = "${repo.cloneUrl}";
      `)),
⁣
⁣
      m('link', {
        rel: "stylesheet",
        id: "prism-theme",
After
45
46
47
48
49
50
51
        window.currentRefType = "${data.currentRefType}";
        window.cloneUrl = "${repo.cloneUrl}";
      `)),
// TODO: don't include prism.css if the user doesn't have the syntaxHighlight plugin
// also allow them to use a custom prism theme
      m('link', {
        rel: "stylesheet",
        id: "prism-theme",
main.ts:88
Before
87
88
89
90
91
92
93
    throw new Error(validator.errors.map(error => `config object at ${error.instancePath.replaceAll("/", ".")}: ${error.message}`).join("\n"))
  }

  eleventyConfig.addTemplateFormats("js")

  const slugify = eleventyConfig.getFilter("slugify")
  const reposData = await repos(reposConfiguration, eleventyConfig.dir.output, slugify)
  // TODO: make a better way of making this default to "" so that it doesn't have to
After
87
88
89


90
91
    throw new Error(validator.errors.map(error => `config object at ${error.instancePath.replaceAll("/", ".")}: ${error.message}`).join("\n"))
  }

⁣
⁣
  const slugify = eleventyConfig.getFilter("slugify")
  const reposData = await repos(reposConfiguration, eleventyConfig.dir.output, slugify)
  // TODO: make a better way of making this default to "" so that it doesn't have to
main.ts:202
Before
201
202
203
204




205
206
      return highlighter(language, code)
    }
    else {
      return code
⁣
⁣
⁣
⁣
    }
  })
After
201
202
203
204
205
206
207
208
209
210
      return highlighter(language, code)
    }
    else {
      return '<pre class="language-text">' + code.replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;") + '</pre>'
    }
  })