html insert html snippets code example

Example 1: insert code snippet into html

<pre class="line-numbers">
  <code class="language-css">
    p { color: red }
  </code>
</pre>

/* The following language classes are supported:
language-markup – Use for HTML, XML, etc…
language-css
language-clike
language-javascript
language-java
language-php
language-scss
language-bash
language-python
language-sql
language-https
language-csharp
language-aspnet
language-scala
language-haskell
language-objectivec
language-latex
language-git */

Example 2: Display HTML snippets in HTML

/* 1. First search "html entities converter" in Google
and convert the code snippet in html entities form */
2. /* Paste the code inside this snippet : */
<pre>
  <code>
  
   &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;My First Heading&lt;/h1&gt;
&lt;p&gt;My first paragraph.&lt;/p&gt;
  
</code>
</pre>

Example 3: html insert html snippets

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

Example 4: html insert html snippets

<div data-include="header"></div>
<div data-include="footer"></div>

Example 5: html insert html snippets

$(function () {
  var includes = $('[data-include]')
  $.each(includes, function () {
    var file = 'views/' + $(this).data('include') + '.html'
    $(this).load(file)
  })
})

Tags:

Misc Example

Recent Posts