tabler/_syntax-highlighting.html

---
title: Syntax highlighting
page-title: Syntax highlighting
layout: default
---

<div class="container">
	<div class="row row-deck">
		<div class="col-lg-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">HTML</h3>
				</div>
				<pre class="card-body" data-highlight="html"><code>&lt;!doctype html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;Title&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;!-- Your content --&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">JavaScript</h3>
				</div>
				<pre class="card-body" data-highlight="js"><code>require(['hljs', 'jquery'], function(hljs, $){
    $(document).ready(function(){
        $('pre[data-highlight]').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    });
});</code></pre>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">SCSS</h3>
				</div>
				<pre class="card-body" data-highlight="scss"><code>.link-overlay {
	position: relative;

	&:hover {
		.link-overlay-bg {
			opacity: 1;
		}
	}
}</code></pre>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">JSON</h3>
				</div>
				<pre class="card-body" data-highlight="scss"><code>[
  {
    "title": "apples",
    "count": [12000, 20000],
    "description": {"text": "...", "sensitive": false}
  },
  {
    "title": "oranges",
    "count": [17500, null],
    "description": {"text": "...", "sensitive": false}
  }
]</code></pre>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">C++</h3>
				</div>
				<pre class="card-body" data-highlight="cpp"><code>#include &lt;iostream&gt;

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i &lt; 0xFFFF; i++)
    cout &lt;&lt; "Hello, World!" &lt;&lt; endl;

  char c = '\n';
  unordered_map &lt;string, vector&lt;string&gt; &gt; m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}</code></pre>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">SQL</h3>
				</div>
				<pre class="card-body" data-highlight="cpp"><code>CREATE TABLE "topic" (
    "id" serial NOT NULL PRIMARY KEY,
    "forum_id" integer NOT NULL,
    "subject" varchar(255) NOT NULL
);
ALTER TABLE "topic"
ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
REFERENCES "forum" ("id");

-- Initials
insert into "topic" ("forum_id", "subject")
values (2, 'D''artagnian');</code></pre>
			</div>
		</div>
	</div>
</div>