mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00

Files

T

Nick Vigilante c84aa564ba docs: normalize code-fence languages for Shiki compatibility (#27161 )

Normalizes non-standard code-fence language tags across `docs/**` so a
strict highlighter (Shiki, used by Fumadocs) won't fail the build on an
unrecognized language, and unifies redundant synonym tags onto one
canonical form per language. The current renderer (Speed-Highlight)
detects the language from the code content, not the fence label, so this
drift wasn't visible until now.

## Changes

- `hcl` -> `tf` (199 fences, including indented ones nested in
numbered/bulleted lists). Shiki ships `hcl` and `terraform` as two
distinct grammars (not aliases); every `hcl`-tagged fence in `docs/**`
is actually Terraform resource/data/provider syntax, so the more
specific `terraform` grammar is correct for all of them. `tf` is Shiki's
own alias for that grammar, and it's also what GitHub's own markdown
renderer resolves to the same HCL/Terraform highlighting.
- `pwsh`/`powershell` -> `ps1`. Both `ps` and `ps1` are registered
PowerShell aliases in Shiki, but on GitHub's renderer only `.ps1` is a
registered file extension (`.ps` isn't), so `ps1` renders identically to
`powershell` there today while bare `ps` would silently lose
highlighting.
- `env` -> `dotenv` (a dedicated Shiki grammar for `KEY=VALUE` files)
- `text`/`output`/`none`/`url` -> `txt`. Same built-in plain-text
fallback either way, just shorter.
- `Dockerfile` -> `dockerfile` (lowercase)
- `bash`/`shell` -> `sh` (732 fences). Shiki and GitHub both alias all
three to a single shell grammar; this was already the style guide's
stated preference, just not enforced across the existing corpus until
now.
- `markdown` -> `md` (4 fences). Alias of the same grammar in both Shiki
and GitHub.
- `jsonc` -> `json` (1 fence). The block has no comments or trailing
commas, so it doesn't need the comments-capable grammar.
- `ts` -> `tsx` (2 fences, `docs/about/contributing/frontend.md`).
Verified the actual content tokenizes identically under both grammars,
and a sibling block in the same file already needs `tsx` for real JSX,
so unifying to one tag is safe for this file. Documented a caveat: `tsx`
mis-tokenizes the legacy angle-bracket type-assertion syntax
(`<Type>value`), which is invalid in real `.tsx` files anyway, so use
`value as Type` instead.
- `yml` -> `yaml` (1 fence)
- Updated `docs/.style/style-guide/formatting.md` to document all
canonical tags

`promql` (2 fences) and `caddyfile` (2 fences) are left as-is. Shiki
doesn't bundle a grammar for either, so they need a custom grammar
registration when the site adopts Shiki, rather than degrading to `txt`.
Tracked as follow-up work under DOCS-118 and
[DOCS-544](https://linear.app/codercom/issue/DOCS-544/vendor-a-local-promql-grammar-for-shiki-syntax-highlighting)
(promql).

Does not touch `offlinedocs/`.

Linear:
[DOCS-476](https://linear.app/codercom/issue/DOCS-476/normalize-docs-code-fence-languages-de-risk-shikifumadocs)

<details>
<summary>How the fence tags were verified</summary>

Each tag was tested against a real `shiki@latest` highlighter instance
(`codeToHtml`/`codeToTokens`) and cross-checked against GitHub's
`@wooorm/starry-night` grammar sources (the renderer that actually
displays these `.md` files today, in repo browsing and PR diffs), since
that's what determines whether brevity is safe before Shiki adoption:

```text
FAIL  env        -- Language `env` is not included in this bundle.
FAIL  Dockerfile -- Language `Dockerfile` is not included in this bundle.
FAIL  promql     -- Language `promql` is not included in this bundle.
FAIL  caddyfile  -- Language `caddyfile` is not included in this bundle.
FAIL  pwsh       -- Language `pwsh` is not included in this bundle.
FAIL  output     -- Language `output` is not included in this bundle.
```

`hcl` doesn't error in Shiki, since it's a real grammar, but that's
exactly the trap: it was silently rendering every fence with the generic
HCL grammar instead of the Terraform-specific one. Every `hcl`-tagged
fence in `docs/**` was manually checked against `origin/main` and is
genuinely Terraform content.

For `ts`/`tsx`, tokenizing the actual doc content confirmed identical
output under both grammars; a synthetic test with the legacy
angle-bracket cast syntax confirmed `tsx` degrades on that specific
construct, which the style guide now calls out.

The first normalization pass only matched fence tags at column 0
(`^```tag$`), missing tags indented inside numbered/bulleted lists. A
follow-up pass caught the remaining occurrences at any indentation
level.

</details>


---

*This PR description and the underlying changes were prepared with Coder
Agents assistance.*

2026-07-15 14:07:09 -04:00

3.0 KiB

Raw Blame History

Icons

Coder uses icons in several places, including ones that can be configured throughout the app, or specified in your Terraform. They're specified by a URL, which can be to an image hosted on a CDN of your own, or one of the icons that come bundled with your Coder deployment.

Template Icons:
- Make templates and workspaces visually recognizable with a relevant or memorable icon

Terraform:

These can all be configured to use an icon by setting the icon field.

data "coder_parameter" "my_parameter" {
  icon = "/icon/coder.svg"

  option {
    icon = "/emojis/1f3f3-fe0f-200d-26a7-fe0f.png"
  }
}

Authentication Providers:
- Use icons for external authentication providers to make them recognizable. You can set an icon for each provider by setting the CODER_EXTERNAL_AUTH_X_ICON environment variable, where X is the number of the provider.
```
CODER_EXTERNAL_AUTH_0_ICON=/icon/github.svg
CODER_EXTERNAL_AUTH_1_ICON=/icon/google.svg
```
Support Links:
- Use icons for support links to make them recognizable. You can set the icon field for each link in CODER_SUPPORT_LINKS array.

Bundled icons

Coder is distributed with a bundle of icons for popular cloud providers and programming languages. You can see all of the icons (or suggest new ones) in our repository on GitHub.

You can also view the entire list, with search and previews, by navigating to /icons on your Coder deployment (for example, https://coder.example.com/icons). This can be particularly useful in airgapped deployments.

External icons

You can use any image served over HTTPS as an icon, by specifying the full URL of the image. We recommend that you use a CDN that you control, but it can be served from any source that you trust.

You can also embed an image by using data: URLs.

Only the https: and data: protocols are supported in icon URLs (not http:)
Be careful when using images hosted by someone else; they might disappear or change!
Be careful when using data: URLs. They can get rather large, and can negatively impact loading times for pages and queries they appear in. Only use them for very small icons that compress well.

3.0 KiB Raw Blame History

Icons

Bundled icons

External icons

3.0 KiB

Raw Blame History