PatternFly Element | Codeblock element
Render code in a styled and formatted way
Usage
Describe how best to use this web component along with best practices.
<h2>HTML Markup</h2>
<pfe-codeblock code-language="markup">
<pre codeblock-container>
<code>
<h1>example html</h1>
<p>some paragraph text</p>
</code>
</pre>
</pfe-codeblock>
<h2>Javascript Markup</h2>
<pfe-codeblock code-language="javascript">
<pre codeblock-container>
<code>
const example="javascript";
let test=null;
</code>
</pre>
</pfe-codeblock>
Attributes
-
code-language
: Describe this attribute and what function is serves. Valid values include: markup, html, xml, svg, mathml, css, clike, javascript, js. -
code-line-numbers
: Describe this attribute and what function is serves. -
code-line-number-start
: Describe this attribute and what function is serves. -
code-theme
: Describe this attribute and what function is serves.
Variable hooks
Available hooks for styling:
Variable name | Default value | Region |
---|---|---|
--pfe-theme--font-family--code |
"Overpass Mono", Consolas, Monaco, "Andale Mono", monospace | N/A |
Dependencies
Describe any dependent elements or libraries here too.
Dev
`npm start`
Test
`npm run test`
Build
`npm run build`
Demo
From the PFElements root directory, run:
`npm run demo`
Code style
Codeblock (and all PFElements) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.