- Custom Styles
- Syntax Highlighting
- Syntax Highlighting For Specific Code Segments
- Built-in syntax highlighting
copy-code-block accepts a code file or code in a string. CCB returns the transformed code and a button that can copy the displayed code to the clipboard.
Below is the no frills default...
Check out the examples for all the options.
copy-code-block, a solution to display code in the browser and copy it to the clipboard.
HAS THE POWER OF GREYSKULL can syntax highlight any language.
Couldn't have done this without kgroat.
;// ORconst copyCodeBlock = ;
Then add it to your code
If you don't like the styles, you can override them.
The options argument is an object. There are five customizable colors:
These are the colors used for
borderColor for the entire code block as well as the copy button. If no
buttonBackground is supplied, they fall back to
You can find all the defaults here.
If you want syntax highlighting, you'll need to
npm install highlight.js.
Then you need to initialize your language:
Or, if you want all of the languages:
Then, when you're calling
copyCodeBlock, tell it what language to use:
NOTE: the 1st argument passed to
hljs.registerLanguage is the value for lang in
copyCodeBlock's options object. The languages all have aliases. So if you wanted to use HTML, you could register it as
html, a valid alias for
...but you still have to require the
xml language. Then use
html as the
lang value in
copyCodeBlock's options object...
If you supply
lang: 'auto', this will tell highlight.js to attempt to automatically choose a language from whichever ones are loaded.
Syntax highlighting for specific code segments.
NOTE: camelCase colors get converted to hyphen-case, such as
metaString converts to
meta-string in the rust example.
For a complete list of
hljs classes, see their CSS class reference. To see which classes are used by a specific language, find the language from the complete list and look for properties called
Built-in syntax highlighting
Another option for styling the highlighted code is to choose any of hightlight.js's built-in styles by importing it as so:
textColor may override the built-in syntax highlighting.
node 6.0.0 or higher,
npm 3.8.6 or higher
npm start, runs storybook
- in a different terminal,
npm truns all the tests
To run 1 test file, prepend
-- -t tests/theTestFileName.js
npm t -- -t tests/SimplHTML.js
To run 1 testcase, prepend
--testcase "name of testcase"
npm t -- -t tests/SimplHTML.js --testcase "Simple HTML"