Code

Displays a block of code. Syntax highlighting is available by default for the following languages: cpp, xml, bash, clojure, coffeescript, cs, css, markdown, dockerfile, elixir, elm, ruby, erlang, glsl, go, gradle, groovy, handlebars, haskell, ava, javascript, json, kotlin, less, livescript, lua, makefile, perl, php, powershell, python, r, rust, scala, scss, shell, sql, swift, yaml, twig, typescript.
Highlighting of other languages is available as well:

import {highlight} from '@jetbrains/ring-ui/components/code/code'
import 1c from 'highlight.js/lib/languages/1c';
highlight.registerLanguage('1c', 1c);

Code

Example

<div id="code"></div>

import React from 'react';
import {render} from 'react-dom';

import Code from '@jetbrains/ring-ui/components/code/code';

const container = document.getElementById('code');
const demo = (
  <Code
    code={`
      import React, {Component} from 'react';
      import ChildComponent from './child-component';

      const MyComponent = () => (
        <div className="class">
          <ChildComponent prop="value" />
        </div>
      );
    `}
  />
);

render(demo, container);

Code as tagged template

Example

<div id="code"></div>

import React from 'react';
import {render} from 'react-dom';

import {code} from '@jetbrains/ring-ui/components/code/code';

const container = document.getElementById('code');
const demo = code`
  import React from 'react';
  import {code} from '@jetbrains/ring-ui/components/code/code';

  const el = code\`some('js')\`;
`;

render(demo, container);