## CodeHighlight  
Use CodeHighlight component for highlighting code snippets with syntax highlighting for different languages like python, cpp, javascript, etc.  
Category: Typography  

### CSS Extensions

As of DMC 1.2.0, `CodeHightlight` component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.



### Simple Usage

`CodeHighlight` highlight given code with [highlight.js](https://highlightjs.org/), it accepts `code` prop with string of
code to highlight and `language` prop with language name. If language is not provided, `CodeHighlight` will assume that
the code language is `tsx` (TypeScript).

`CodeHighlight` is used to show the code for all the examples in these docs.

```python
import dash_mantine_components as dmc

component = dmc.CodeHighlight(
    language="python",
    code="""# Kadane's Algorithm

class Solution:
    def maxSubArray(self, nums: List[int]) -> int:
        curr, summ = nums[0], nums[0]
        for n in nums[1:]:
            curr = max(n, curr + n)
            summ = max(summ, curr)
        return summ""",
)
```
### Supported Languages 

The `CodeHighlight` components supports syntax highlighting for the top 10 most commonly used languages:

* `python` / `py`
* `javascript` / `js`
* `typescript` / `ts`
* `html` / `xml`
* `css`
* `json`
* `yaml` / `yml`
* `bash` / `sh`
* `sql`
* `markdown` / `md`

If you set `language="some-unsupported-lang"`, the code will render with no syntax highlighting.

If you need support for a language not currently included, please open an issue on our [GitHub repository.](https://github.com/snehilvj/dash-mantine-components/issues)

### Copy button
You can customize copy button labels with `copyLabel` and `copiedLabel` props. In case you need to remove 
the copy button, set `withCopyButton=False`.


```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.CodeHighlight(
        code = "dmc.Text('This codeblock has a custom copy button label')",
        language="python",
        copyLabel="Copy button code",
        copiedLabel="Copied!",
    ),
    dmc.CodeHighlight(
            code = "dmc.Text('This codeblock does not have a copy button')",
            language="python",
            withCopyButton=False,
            mt="md"
        )
])
```
### With tabs
`CodeHighlightTabs` component allows organizing multiple code blocks into tabs:

The `code` prop is a list of dictionaries, where each dictionary defines a tab. Each dictionary can include the following keys:

- `fileName`: The label for the tab.
- `code`: The code string to display in the tab.
- `language`: The programming language for syntax highlighting.
- `icon`: An optional component to display to the left of the fileName.


```python

code = [
    {
        "fileName": "demo.py",
        "code": demo_py, # your code string here
        "language": "python",
        "icon": DashIconify(icon="vscode-icons:file-type-python", width=20), 
    },
    {
        "fileName": "styles.css",
        "code":styles_css, # your code string here
        "language": "css",
        "icon": DashIconify(icon="vscode-icons:file-type-css", width=20), 
    },    
]

dmc.CodeHighlightTabs(code=code)

```

### Expandable code
If the code snippet is too long, you can make it expandable with `withExpandButton` and `defaultExpanded=False` props.
To change label of the expand/collapse control tooltip, use `expandCodeLabel` and `collapseCodeLabel`.

Note - the expandable code feature is only available in the  `CodeHighlightTabs` component.


### Inline code

`InlineCodeHighlight` component allows highlighting inline code snippets:


```python
import dash_mantine_components as dmc

component = dmc.Text(
    [
        "You can highlight code inline ",
        dmc.InlineCodeHighlight(
            code='dmc.InlineCodeHighlight(code="Your code string here", language="python")',
            language="python",
        ),
        " Is not that cool?",
    ]
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### CodeHighlight Selectors

| Selector | Static selector               | Description                          |
|----------|--------------------------------|--------------------------------------|
| root     | .mantine-CodeHighlight-root    | Root element                         |
| pre      | .mantine-CodeHighlight-pre     | Pre element, contains code element   |
| code     | .mantine-CodeHighlight-code    | Code element                         |
| copy     | .mantine-CodeHighlight-copy    | Copy button                          |



#### CodeHighlightTabs Selectors

| Selector      | Static selector                     | Description                                            |
|---------------|--------------------------------------|--------------------------------------------------------|
| root          | .mantine-CodeHighlightTabs-root      | Root element                                           |
| pre           | .mantine-CodeHighlightTabs-pre       | Pre element, contains code element                    |
| codeWrapper   | .mantine-CodeHighlightTabs-codeWrapper | Wrapper around code element, used for expand/collapse logic |
| code          | .mantine-CodeHighlightTabs-code      | Code element, contains highlighted code               |
| header        | .mantine-CodeHighlightTabs-header    | Header element, contains copy button and file names   |
| controls      | .mantine-CodeHighlightTabs-controls  | Controls container, contains control buttons (copy, collapse, etc.) |
| control       | .mantine-CodeHighlightTabs-control   | Control button (copy, collapse, etc.)                 |
| files         | .mantine-CodeHighlightTabs-files     | File names list                                       |
| file          | .mantine-CodeHighlightTabs-file      | File name                                             |
| fileIcon      | .mantine-CodeHighlightTabs-fileIcon  | File icon                                             |
| showCodeButton| .mantine-CodeHighlightTabs-showCodeButton | Button that reveals full code when it is collapsed |


#### InlineCodeHighlight Selectors

| Selector | Static selector                    | Description    |
|----------|-------------------------------------|----------------|
| code     | .mantine-InlineCodeHighlight-code   | Root element   |


### Keyword Arguments
#### CodeHighlight

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- code (string; required):
    Code to highlight.

- copiedLabel (string; optional):
    Copied tooltip label, `'Copied'` by default.

- copyLabel (string; optional):
    Copy tooltip label, `'Copy code'` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- highlightOnClient (boolean; optional):
    Determines whether code should be highlighted only after component
    is mounted to the dom (disables code highlight on server), `False`
    by default.

- language (string; required):
    Code language, `'tsx'` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withCopyButton (boolean; optional):
    Determines whether copy button should be displayed, `True` by
    default.
#### CodeHighlightTabs

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- activeTab (number; optional):
    Index of controlled active tab state.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- code (boolean | number | string | dict | list; required):
    Code to highlight with meta data (file name and icon).

- collapseCodeLabel (string; optional):
    Collapse button label and tooltip, `'Collapse code'` by default.

- copiedLabel (string; optional):
    Copied tooltip label, `'Copied'` by default.

- copyLabel (string; optional):
    Copy tooltip label, `'Copy code'` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- defaultExpanded (boolean; optional):
    Uncontrolled expanded state initial value.

- expandCodeLabel (string; optional):
    Expand button label and tooltip, `'Expand code'` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- maxCollapsedHeight (string | number; optional):
    `max-height` of code in collapsed state.

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withCopyButton (boolean; optional):
    Determines whether copy button should be displayed, `True` by
    default.

- withExpandButton (boolean; optional):
    Determines whether to show the expand button, `False` by default.

- withHeader (boolean; optional):
    Determines whether header with file names and copy button should
    be rendered, `True` by default.
#### InlineCodeHighlight

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- code (string; required):
    Code to highlight.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- language (string; optional):
    Code language, `'tsx'` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.