Tenon-UI Documentation

Code on GitHub

Code block

As developers we make applications for people, and as developers are people too sometimes we build technical applications.

Sharing code should also be for everyone and the Tenon-UI CodeBlock helps you achieve that by giving you an easy to use accessible highlighted code block.

This component leverages react-syntax-highlighter. However some tweaks have been made to ensure that all text has sufficient colour contrast to be readable by as many people as possible.

NOTE: Every single code example in this documentation site uses the CodeBlock component!

Installation

Due to the payload size of a syntax highlighting, this component is not part of the main Tenon-UI package.

Installing with npm


            

            

            
Installing with yarn

            

            

            

            
Usage

            
The code block can either display the contents of a file or a code string, making it highly flexible.

            
With a file

            

            

            

            
The CodeBlock component comes with built-in XHR, so it will fetch the code file automatically from the server at the given location and display it.

            
This could be handy if you are displaying actual code files, as the code blocks will then update real time.

            
With a code string

            

            

            

            
Accessibility features

            
The CodeBlock component enables easy keyboard navigation of the blocks themselves. The blocks themselves are focusable so the snippets can easily be selected with the TAB key.

            
Using standard text selecting key combinations you are also able to change the exact code selection.

            
And finally, you also get text selection help when clicking on the code block with your mouse.

            
A side effect of this is that you can edit the text in the code block, but the original text of the code block is reset when the code block loses focus.

            
Component props

            
file

            
The url of the code file you would like to display in the code block.

            
codeString

            
A formatted code string you would like to display in the code block.

            
onReset

            
An event handler that gets called if the user changes the code and the code is subsequently reset onBlur.

            
This event is NOT called if no changes are made in the text.

            
With this event you could inform your users that the text has been reset for the sake of clarity:

            

            

            

            
language

            
In order to keep the bundle size small, the most common languages supported in a React application are supported:

            
    
              
  1. jsx
    2. 
              
  2. javascript
    3. 
              
  3. json
    4. 
              
  4. html
    5. 
              
  5. css
    6. 
            

            
By default the code block is setup to render JSX code but you can specify the language with the language prop:

            

            

            

            
If you would like to use this code block with another language format, please let us know!