Origami Frontend Components & Services

Demos: o-syntax-highlight

HTML

Syntax highlight theme for HTML

<div class="demo" data-o-component="o-syntax-highlight">
      <pre><code class="o-syntax-highlight--html">
	&lt;div class=&quot;some-class&quot; data-attribute=&quot;value&quot;&gt;
		&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consectetur est in urna iaculis tempus.&lt;/p&gt;
		&lt;p&gt;Nam faucibus feugiat lectus, &lt;a href=&quot;#&quot;&gt;sit amet blandit&lt;/a&gt; purus bibendum et.&lt;/p&gt;
		&lt;button type=&quot;button&quot; name=&quot;button&quot;&gt;Button.&lt;/button&gt;
		&lt;!-- &lt;span&gt;Comment&lt;/span&gt; --&gt;
	&lt;/div&gt;</code></pre>
    </div>

JavaScript

Syntax highlight theme for JavaScript

CSS

Syntax highlight theme for CSS

Inline Code

Syntax highlight theme for inline <code> tags

<div class="demo" data-o-component="o-syntax-highlight">
      <p>
        This is some text, and it is here to illustrate that if you use a
        <code>&lt;code&gt;</code> tag, it will get treatment regardless of what
        language is inside it. But only if it is an inline
        <code>&lt;code&gt;</code> tag
      </p>
      <p>
        This is some text, and it is here to illustrate that if you use a
        <var>&lt;var&gt;</var> tag, it will get treatment regardless of what
        language is inside it. But only if it is an inline
        <var>&lt;var&gt;</var> tag
      </p>
      <pre>
				<code class="o-syntax-highlight--html">
	&lt;html&gt;
		&lt;head&gt;
			&lt;!-- links and scripts --&gt;
		&lt;/head&gt;
		&lt;body&gt;
			&lt;div class=&quot;some-class&quot; data-attribute=&quot;value&quot;&gt;
				&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consectetur est in urna iaculis tempus.&lt;/p&gt;
				&lt;p&gt;Nam faucibus feugiat lectus, &lt;a href=&quot;#&quot;&gt;sit amet blandit&lt;/a&gt; purus bibendum et.&lt;/p&gt;
				&lt;button type=&quot;button&quot; name=&quot;button&quot;&gt;Button.&lt;/button&gt;
				&lt;span&gt;Comment&lt;/span&gt;

			&lt;/div&gt;
		&lt;/body&gt;
	&lt;/html&gt;</code>
			</pre>
    </div>

JSON

Syntax highlight theme for JSON

YAML

Syntax highlight theme for YAML

SCSS

Syntax highlight theme for SCSS

Diff

Syntax highlight theme for diff

<div class="demo" data-o-component="o-syntax-highlight">
      <pre><code class="o-syntax-highlight--diff">
	&lt;div class=&quot;o-example o-example--alert o-example--error&quot; data-o-component=&quot;o-example&quot;&gt;
		&lt;div class=&quot;o-example__container&quot;&gt;
			&lt;div class=&quot;o-example__content&quot;&gt;
	-			&lt;p class=&quot;o-example__highlight&quot;&gt;Something went wrong!
	+			&lt;p class=&quot;o-example__content-main&quot;&gt;
	+				&lt;span class=&quot;o-example__content-highlight&quot;&gt;Something went wrong!&lt;/span&gt;
	-				&lt;span class=&quot;o-example__detail&quot;&gt;The quick brown fox did not jump over the lazy dogs.&lt;/span&gt;
	+				&lt;span class=&quot;o-example__content-detail&quot;&gt;The quick brown fox did not jump over the lazy dogs.&lt;/span&gt;
				&lt;/p&gt;
	+			&lt;p class=&quot;o-example__additional-info&quot;&gt;Did you know that that sentence uses all of the letters in the alphabet at least once?&lt;/p&gt;
	-			&lt;p class=&quot;o-example__content-additional&quot;&gt;Did you know that that sentence uses all of the letters in the alphabet at least once?&lt;/p&gt;

				&lt;div class=&quot;o-example__actions&quot;&gt;
	-				&lt;a href=&quot;#&quot; class=&quot;o-example__action--primary&quot;&gt;Button&lt;/a&gt;
	+				&lt;a href=&quot;#&quot; class=&quot;o-example__actions__primary&quot;&gt;Button&lt;/a&gt;
	-				&lt;a href=&quot;#&quot; class=&quot;o-example__action--secondary&quot;&gt;Text link&lt;/a&gt;
	+				&lt;a href=&quot;#&quot; class=&quot;o-example__actions__secondary&quot;&gt;Text link&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	</code></pre>
    </div>

Bash

Syntax highlight theme for bash

<div class="demo" data-o-component="o-syntax-highlight">
      <pre><code class="o-syntax-highlight--bash">echo $1
	string=&quot;I&apos;m a fan of Origami.&quot;
	echo ${string:6:3}

	expr 3 + 12

	declare -i number
	number = (2 + 4) * 10

	cat file1 file2 &gt; combined

	exec &lt; file

	this &amp;&amp; that

	foo | grep bar
	du -cks * | sort -rn | head

	echo *.txt
	#some comment</code></pre>
    </div>
Status
active
Switch component view

GitHub Repository

Install o-syntax-highlight

If using the Build Service, add o-syntax-highlight@^4.0.0 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-syntax-highlight@^4.0.0".

Help & Support

o-syntax-highlight is maintained directly by the Origami team. If you have any questions about o-syntax-highlight or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com