Prismjs Code Block Web Component
npm install prism-code-block-wcLanguage | Language Attribute Name
---|:---:
C-Like | clike
C# | cs or csharp or dotnet
CSS | css
Git | git
Go | go
GraphQl | graphql
HTML | html or markup or xml or svg
Java | java
JavaScript | javascript or js
JSON | json
PHP | php
Pug | pug
Python | python
React | jsx or react
Sass (SCSS) | scss or sass
SQL | sql
TypeScript React | tsx
__head Element__
``html`
__Body Element__
`html`
// JavaScript array and loop
var array = [1, 2, 3];
array.forEach(item => {
console.log(item);
});`
__React__jsx
import React from 'react'
function App() {
const code =
// JavaScript array and loop
var array = [1, 2, 3];
array.forEach(item => {
console.log(item);
});
`
return (
Hello World
)
}
`html`
// JavaScript array and loop
var array = [1, 2, 3];
array.forEach(item => {
console.log(item);
});
Additional languages will become available within the Prisim module.
The language class names are defined as key-value pairs within the web component. Append any additional languages using the same pattern defined below.
`typescript``
const languageClassNameOptions: TOptions = {
clike: () => setLanguageClassName('clike'),
//... language class names ...
xml: () => setLanguageClassName('markup')
}
const prismLanguageSrcCode: any = {
clike: languageBase.clike,
// ... languages ...
typescript: languageBase.typescript
}