Inconsistent styles between markdown generated and non-markdown elements

It seems like when markdown is used to create an element, a class is added automatically that has specific styles associated with it. However, in react components and hbs blocks, we can't use markdown, so we manually add the tags that markdown would add.

In the previous two links, use of the <code> element is a good example. In the react component a11y docs example, the class .ws-code has been added to those elements, and in the hbs flex layout example, .ws-code was not added, and you can see that they have different styling.

Ideally there would be consistency there, and the elements would be styled appropriately without having to manage the classes manually. Some ideas to fix, if any are possible:

• Create better style selectors for these elements so we can use hbs/element tags and they get the correct styling - seems like we could do this?

• Extend the react/hbs blocks to be able to parse markdown and manage the classes for us. I looked into this at one point and it didn't seem easy, at least with the react component.

• Structure the example content better so that we're only using markdown where it's available (ie, don't use markdown in the react components or hbs blocks). This is pretty inflexible, I think we should be able to use markdown wherever, but could provide some consistency in the docs I suppose?

Jira Issue: PF-591

Compare the rendered code elements in packages/v4/patternfly-docs/content/accessibility/card/card.md and src/patternfly/layouts/Flex/examples/Flex.md, focusing on the differing .ws-code treatment. Trace how markdown and the React or HBS examples apply styles, then define a consistent result for both paths and verify that the two examples render the same way.