A syntax highlighter Viewer and Editor for Looker SDK supported languages.
npm install @looker/code-editorThis package contains code display and editor components that are used in Looker extensions such as the API Explorer and LookML Diagram.
Add dependency to your project using yarn or npm
``sh`
yarn add @looker/code-editor
or
`sh`
npm install @looker/code-editor
This component is a specialized or
that has various search, syntax highlighting and other display options. Use this component for read-only code display use cases. This component is used by this package's CodeEditor and Markdown component for inline and block code sections.| Prop | Description | Default |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| language | This prop configures the syntax highlighting language and accepts any
react-prism-renderer supported language, as well as ruby, kotlin, swift, and csharp | json |
| code | The code to be displayed and highlighted. | _required_ |
| pattern | The search pattern to be highlighted in the input code. | '' |
| transparent | A flag for disabling the backgroundColor added by default. | false |
| inline | When true, inline is used. is used by default. | false |
| lineNumbers | A flag for enabling line numbers. | false |$3
This component wraps the
component and adds a "copy to Clipboard" button| Prop | Description | Default |
| ------- | ----------------------------------------------------- | ---------- |
| ... | All
props are accepted | |
| caption | An override for the Copy button text, which is "Copy" | _optional_ |$3
This component wraps the
component and adds a hidden that allows for code editing.| Prop | Description | Default |
| -------- | ------------------------------------------ | ---------- |
| ... | All
props are accepted | |
| onChange | An event handler for capturing user input. | _required_ |#### Example
`javascript
const CodeBlockEditor: React.FC = () => {
const [codeString, setCodeString] = useState()
return (
onChange={setCodeString}
language="python"
lineNumbers={true}
/>
)
}
`$3
This component is a wrapper around a
component. It uses @looker/component renderers for text and for inline and block code. It has options for link handling and renderer overrides.| Prop | Description | Default |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| source | The Markdown string to be rendered | _required_ |
| pattern | The search pattern to be highlighted in the source |
'' |
| transformLinkUri | A function for pre-processing the link before it is navigated to, used for removing tags or modifying the destination. | _optional_ |
| linkClickHandler | An override for link click behavior. | _optional_ |
| paragraphOverride | An override for the default Paragraph renderer. | _optional_ |#### Using
inside MarkdownThis component checks for decorated code blocks. The following
source would create a Ruby syntax highlighted code block.``
When using the Ruby SDK this would be passed as a Ruby hash like:
ruby
{
:model=>"thelook",
:view=>"inventory_items",
:fields=>
["category.name",
"inventory_items.days_in_inventory_tier",
"products.count"],
:filters=>{:"category.name"=>"socks"},
:sorts=>["products.count desc 0"],
:limit=>"500",
:query_timezone=>"America/Los_Angeles",
}
`