search

cert-manager / website

Source code for the cert-manager.io website, including project documentation
https://cert-manager.io
Apache License 2.0
53 stars 333 forks source link

Markup shell session snippets as console #1514

Closed lindhe closed 2 months ago

lindhe commented 2 months ago

This change replaces "bash" with "console" as the Markdown code fence keyword. This lets Markdown engines differentiate between the shell command and its output, with a leading $ (or # or >) denoting a command and the rest is just text output with no syntax highlighting.

lindhe commented 2 months ago

As documented here, GitHub uses linguist to render syntax highlighting. And linguist has support for the console keyword to signify shell sessions. I do not know if the cert-manager website supports the same syntax highlighting as GitHub, but I think this is an improvement regardless of that.

The reason this is an improvement even if the website does not support the console keyword (which it might) is that I expect the website to render this as plain text if it does not recognize the code fencing keyword. That would be better than rendering this console output as Bash code. Also, it will look good on GitHub regardless of what it looks like on the website.

Here's what it looks like on the website today:

image

image

Notice how random integers get highlighted, and whatnot.

netlify[bot] commented 2 months ago

Deploy Preview for cert-manager ready!

Built without sensitive environment variables

Name Link
Latest commit 94725cfa6e341fa999130427080f23c666cb9631
Latest deploy log https://app.netlify.com/sites/cert-manager/deploys/668e3d2e94e93800089a9c44
Deploy Preview https://deploy-preview-1514--cert-manager.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

lindhe commented 2 months ago

Seems like the website will render this without any syntax highlighting (based on the preview build):

image

Yet, as I mentioned, I think this is an improvement over having incorrect syntax highlighting.

inteon commented 2 months ago

Hi @lindhe, we use prismjs to do syntax highlighting: https://github.com/inteon/cert-manager-website/blob/bcf50d0c4530af45d411f00eca8be6f436f9fd7d/components/docs/CodeBlock.jsx#L10-L12

cert-manager-prow[bot] commented 2 months ago

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: wallrj

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files: - ~~[OWNERS](https://github.com/cert-manager/website/blob/master/OWNERS)~~ [wallrj] Approvers can indicate their approval by writing `/approve` in a comment Approvers can cancel approval by writing `/approve cancel` in a comment