Configure prettier and eslint to treat DocsShowCode as code examples

[AlexVelezLl]

Product

KDS.

Current behavior

When we want to show code examples in the KDS docs, we use the DocsShowCode component. We can show HTML, JavaScript, and CSS code with this component. For example:

<DocsShowCode language="javascript">
  console.log("Hello world")
</DocsShowCode>

The problem is that eslint and prettier treat the code inside DocsShowCode as HTML code, so eslint raises exceptions for linting rules and prettier formats this code as html instead of treating this as a code example. So always that we have a css or javascript code examples, we need to write <!-- eslint-disable --> and <!-- prettier-ignore --> comments around it for them to avoid exceptions and unwanted formatting. So we end up with something like:

<!-- eslint-disable -->
<!-- prettier-ignore -->
<DocsShowCode language="javascript">
  console.log("Hello world")
</DocsShowCode>
<!-- eslint-enable -->

Which adds unnecessary complexity to writing our code examples.

Desired behavior

We should configure prettier and eslint to at least ignore the code inside the DocsShowCode component as it's just a code example, and there is no need to apply linting rules and HTML formatting.

At the end, we should be able to write code examples with just:

<DocsShowCode language="javascript">
  console.log("Hello world")
</DocsShowCode>

without the need to write the <!-- eslint-disable --> and <!-- prettier-ignore --> comments.

The Value Add

We will be able to write code examples more easily. And we won't have to worry about unwanted formatting in our code examples.

Possible Tradeoffs

If prettier just ignores the code inside, it will be the responsibility of the developer to write the code example in a well-formatted way.

Additional notes

@rtibbles tried it and it was difficult