--- a/static/main.css	Wed Jun 29 09:00:24 2016 +0800
+++ b/static/main.css	Wed Jun 29 17:21:21 2016 +0800
@@ -7,6 +7,16 @@
     }
 }
 
+.badge-codes-modal {
+    width: 800px;
+}
+
+.snippet {
+    white-space: pre-wrap;
+    word-break: break-all;
+    word-wrap: break-word;
+}
+
 .uk-badge {
     border: none;
     border-radius: 3px;

--- a/templates/project.html	Wed Jun 29 09:00:24 2016 +0800
+++ b/templates/project.html	Wed Jun 29 17:21:21 2016 +0800
@@ -6,6 +6,7 @@
   <div class="uk-container uk-container-center uk-margin-large-top">
     <h2><a href="{{ project.get_url() }}">{{ project.get_title() }}</a></h2>
     <img src="{{ project.get_url() }}/status.svg" alt="Lint Status">
+    {% include ui/codes.html %}
     <dl class="uk-description-list-horizontal list-terse">
       {% if checks %}
         <dt>Last check:</dt>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/templates/ui/codes.html	Wed Jun 29 17:21:21 2016 +0800
@@ -0,0 +1,48 @@
+<button class="uk-button uk-button-link" data-uk-modal="{target:'#status-badge-modal'}">embed</button>
+<div id="status-badge-modal" class="uk-modal">
+  <div class="uk-modal-dialog badge-codes-modal">
+    <a class="uk-modal-close uk-close"></a>
+    <ul class="uk-tab" data-uk-tab="{connect: '#status-badge-snippets'}">
+      <li><a>Markdown</a></li>
+      <li><a>reST</a></li>
+      <li><a>Rdoc</a></li>
+      <li><a>Textile</a></li>
+      <li><a>HTML</a></li>
+    </ul>
+    <ul id="status-badge-snippets" class="uk-switcher uk-margin-top">
+      <li>
+        <pre class="uk-margin-bottom-remove snippet">
+          [![Lint Status]({{ project.get_url(request) }}/status.svg)]({{ project.get_url(request) }})
+        </pre>
+      </li>
+      <li>
+{% whitespace all %}
+<pre class="uk-margin-bottom-remove snippet">
+.. image:: {{ project.get_url(request) }}/status.svg
+    :target: {{ project.get_url(request) }}
+    :alt: Lint Status
+</pre>
+{% whitespace single %}
+      </li>
+      <li>
+        <pre class="uk-margin-bottom-remove snippet">
+          {&lt;img src="{{ project.get_url(request) }}/status.svg" alt="Lint Status" /&gt;}[{{ project.get_url(request) }}]
+        </pre>
+      </li>
+      <li>
+        <pre class="uk-margin-bottom-remove snippet">
+          !{{ project.get_url(request) }}/status.svg(Lint Status)!:{{ project.get_url(request) }}
+        </pre>
+      </li>
+      <li>
+{% whitespace all %}
+<pre class="uk-margin-bottom-remove snippet">
+&lt;a href="{{ project.get_url(request) }}"&gt;
+  &lt;img src='{{ project.get_url(request) }}/status.svg' alt='Lint Status' /&gt;
+&lt;/a&gt;
+</pre>
+{% whitespace single %}
+      </li>
+    </ul>
+  </div>
+</div>