Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Initial version.

  • Loading branch information...
commit b57760f25195d80b7d93ad49767a968c66807c6b 0 parents
@Aupajo authored
23 LICENCE
@@ -0,0 +1,23 @@
+Copyright (c) 2008 Pete Nicholls
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
60 README.markdown
@@ -0,0 +1,60 @@
+h1. Human Textile Reference
+
+The Human Textile Reference is a set of short, easy to understand HTML pages you can include in any project that uses Textile.
+
+*Important:* This is not designed to be a complete reference. Just a quick guide for the layman.
+
+You can view a demo on the "labs page":http://labs.metanation.com/human-textile-reference/.
+
+It's perfect for including as a pop-up help window next to your textarea.
+
+h2. Notes
+
+h3. Size
+
+It's extremely lightweight; one HTML file, one minified CSS file, two images. If your web server has GZip compression switched on it should total 2.2KB.
+
+h3. JavaScript
+
+The guide uses JavaScript to toggle the different categories. If the browser's JavaScript is disabled, every category will be shown expanded, which is fine.
+
+It uses jQuery 1.4.4 from the Google's AJAX CDN (the request should be a cache hit, so you'll incur no extra wait time).
+
+h3. Sass
+
+Included stylesheet is compiled using "Sass":http://sass-lang.com/. If you want to make modifications, alter @sass/textile-reference.css@. You can output the compressed version with:
+
+<pre>
+<code>
+sass sass/textile-reference.scss textile-reference/stylesheets/textile-reference.css -t compressed
+</code>
+</pre>
+
+If you're developing, you can use Sass' @--watch@ option.
+
+h2. How To Use
+
+Clone the repository or "download":http://github.com/Aupajo/human-textile-reference/downloads.
+
+Copy the @textile-reference/@ directory to your project.
+
+Add a help link to the reference:
+
+h3. HTML Snippet
+
+<pre>
+<code>
+You can format your text using
+<a href="textile-reference/index.html"
+ onclick="window.open(this.href,'textile_reference','height=400,width=600,scrollbars=1'); return false;">Textile</a>.
+</code>
+</pre>
+
+h3. Rails Snippet
+
+<pre>
+<code>
+ You can format your text using
+ <%= link_to 'Textile', 'textile-reference/index.html', :popup => ['textile_reference', 'height=400,width=600,scrollbars=1'] %>
+</code>
+</pre>
131 example.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ <head>
+ <title>Usage Example</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <style type="text/css">
+ <!--
+
+ body {
+ color: #333;
+ font: 10pt/1.6em Georgia, serif;
+ margin: 1em auto;
+ width: 740px;
+ }
+
+
+ a:link, a:visited {
+ color: #e2231b;
+ }
+
+ a:hover {
+ color: #f5c07;
+ }
+
+ a:active {
+ color: #910;
+ }
+
+ h1 {
+ font-size: 1.8em;
+ }
+
+ h2 {
+ font-size: 1.4em;
+ margin-top: 0;
+ }
+
+ code {
+ font: 0.9em Monaco, Courier, monospace;
+ }
+
+ .example {
+ background-color: #fffebd;
+ border: 1px solid #ffda78;
+ display: block;
+ padding: 1em;
+ margin-bottom: 2em;
+ }
+
+ .directory {
+ background-color: #eef;
+ padding: 0.2em;
+ }
+
+ .tag {
+ color: #c00;
+ }
+
+ .attribute {
+ color: #eb8422;
+ }
+
+ .value {
+ color: #456cb7;
+ }
+
+ .contents {
+ color: #080e21;
+ }
+
+ #shameless {
+ border-top: 1px dashed #ccc;
+ font-size: 0.9em;
+ color: #999;
+ padding-top: 2em;
+ text-align: center;
+ }
+
+ #shameless a {
+ color: #777;
+ }
+
+ -->
+ </style>
+ </head>
+ <body>
+
+ <h1>Usage Example</h1>
+
+ <h2>Instructions</h2>
+
+ <ol>
+ <li>Copy the <code class="directory">markdown-reference/</code> directory to your project.</li>
+ <li>Include a quick help link to the reference.</li>
+ </ol>
+
+ <h2>Example</h2>
+
+ <div class="example">
+ You can format your text using <a href="markdown-reference/index.html" onclick="window.open(this.href,'markdown_reference','height=400,width=600,scrollbars=1');return false;">Markdown</a>.
+ </div>
+
+ <h2>Code Snippets</h2>
+
+ <h3>HTML</h3>
+
+ <code class="example">
+ You can format your text using<br />
+ <span class="tag">&lt;a
+ <span class="attribute">href=</span><span class="value">"markdown-reference/index.html"</span>
+ <span class="attribute">onclick=</span><span class="value">"window.open(this.href,'markdown_reference','height=400,width=600,scrollbars=1'); return false;"&gt;</span></span><span class="contents">Markdown</span><span class="tag">&lt;/a&gt;</span>.
+ </code>
+
+ <h3>Rails</h3>
+
+ <code class="example">
+ You can format your text using<br />
+ <span class="tag">&lt;%= link_to <span class="attribute">'Markdown'</span>,
+ <span class="attribute">'markdown-reference/index.html'</span>,
+ <span class="attribute">:popup =&gt;</span>
+ [<span class="value">'markdown_reference'</span>,
+ <span class="value">'height=400,width=600,scrollbars=1'</span>]
+ %&gt;</span>
+ </code>
+
+ <p id="shameless">
+ Want to help out? Check out the <a href="http://github.com/Aupajo/human-markdown-reference/tree/master">repository on GitHub</a>!
+ </p>
+
+ </body>
+</html>
BIN  markdown-reference/images/arrow_down.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  markdown-reference/images/arrow_right.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
187 markdown-reference/index.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ <head>
+ <title>Markdown Guide</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/markdown-reference.css" />
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+ <script type="text/javascript">
+ $(window).ready(function() {
+ $('.section-name').each(function(i) {
+ if(i > 0){
+ toggleSection(i);
+ }
+
+ $(this).click(function() {
+ toggleSection(i);
+ });
+ });
+ });
+
+ function toggleSection(i) {
+ $('.section').slice(i, i + 1).toggle();
+ $('.section-name').slice(i, i + 1).toggleClass('deselected');
+ }
+ </script>
+ </head>
+ <body>
+
+ <h1 id="title">Markdown Guide</h1>
+
+ <h2 class="section-name">Text</h2>
+
+ <div class="section">
+ <table>
+ <tr>
+ <th>Markdown</th>
+ <th>Result</th>
+ </tr>
+ <tr>
+ <td>This text is *emphasised*.</td>
+ <td>This text is <em>emphasised</em>.</td>
+ </tr>
+ <tr class="alternate">
+ <td>This text is **bold**.</td>
+ <td>This text is <strong>bold<strong>.</td>
+ </tr>
+ <tr>
+ <td>
+ Here's a quote: <br/>
+ &gt; Excellent work, Kip!
+ </td>
+ <td>
+ Here's a quote:
+ <blockquote>Excellent work, Kip!</blockquote>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <h2 class="section-name">Links and Images</h2>
+
+ <div class="section">
+ <table>
+ <tr>
+ <td>Link to [Google](http://google.com)</td>
+ <td>Link to <a href="http://google.com" target="_blank">Google</a>.</td>
+ </tr>
+ <tr class="alternate">
+ <td>You should [email me](mailto:jane@example.com).</td>
+ <td>You should <a href="mailto:jane@example.com">email me</a>.</td>
+ </tr>
+ <tr>
+ <td>My email address is &lt;jane@example.com&gt;.</td>
+ <td>My email address is <a href="mailto:jane@example.com">jane@example.com</a>.</td>
+ </tr>
+ <tr class="alternate">
+ <td>![The 37signals logo](http://www.37signals.com/images/logo-37signals.png)</td>
+ <td><img src="http://www.37signals.com/images/logo-37signals.png" alt="The 37signals logo" /></td>
+ </tr>
+ </table>
+ </div>
+
+ <h2 class="section-name">Headings</h2>
+
+ <div class="section">
+ <table>
+ <tr>
+ <td># Large Heading</td>
+ <td><h1>Large Heading</h1></td>
+ </tr>
+ <tr class="alternate">
+ <td>## Medium Heading</td>
+ <td><h2>Medium Heading</h2></td>
+ </tr>
+ <tr>
+ <td>### Smaller Heading</td>
+ <td><h3>Smaller Heading</h3></td>
+ </tr>
+ </table>
+ </div>
+
+ <h2 class="section-name">Lists</h2>
+
+ <div class="section">
+ <table>
+ <tr>
+ <th>Markdown</th>
+ <th>Result</th>
+ </tr>
+ <tr>
+ <td>
+ * Milk<br />
+ * Bread<br />
+ * Cheese<br />
+ &nbsp;&nbsp;* Cheddar <span class="note">(note space before asterisk)</span><br />
+ &nbsp;&nbsp;* Camembert<br />
+ * Rice
+ </td>
+ <td>
+ <ul>
+ <li>Milk</li>
+ <li>Bread</li>
+ <li>Cheese
+ <ul>
+ <li>Cheddar</li>
+ <li>Camembert</li>
+ </ul>
+ </li>
+ <li>Rice</li>
+ </ul>
+ </td>
+ </tr>
+ <tr class="alternate">
+ <td>
+ 1. Milk<br />
+ 2. Bread<br />
+ 3. Cheese<br />
+ &nbsp;&nbsp;1. Cheddar <span class="note">(note space before number)</span><br />
+ &nbsp;&nbsp;2. Camembert<br />
+ 4. Rice
+ </td>
+ <td>
+ <ol>
+ <li>Milk</li>
+ <li>Bread</li>
+ <li>Cheese
+ <ol>
+ <li>Cheddar</li>
+ <li>Camembert</li>
+ </ol>
+ </li>
+ <li>Rice</li>
+ </ol>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <h2 class="section-name">Special</h2>
+
+ <div class="section">
+ <table>
+ <tr>
+ <th>Markdown</th>
+ <th>Result</th>
+ </tr>
+ <tr>
+ <td>
+ A sentence, followed by a rule.<br />
+ * * *<br />
+ Another sentence.
+ </td>
+ <td>
+ A sentence, followed by a rule.<br />
+ <hr />
+ Another sentence.
+ </td>
+ </tr>
+ <tr class="alternate">
+ <td>Two \*literal asterisks\*, not to be confused with *emphasis*.</td>
+ <td>Two *literal asterisks*, not to be confused with <em>emphasis</em>.</td>
+ </tr>
+ </table>
+ </div>
+
+ </body>
+</html>
1  markdown-reference/stylesheets/markdown-reference.css
@@ -0,0 +1 @@
+body,input,textarea,select{color:#222;font:9pt "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif}body{background-color:#d1d7e2;line-height:1.6em;margin:0}p{margin-top:0}blockquote{margin:0.5em 2em;color:#666}h1,h2,h3{margin:0}h1{font-size:1.6em}h2{font-size:1.4em}h3{font-size:1.2em}ul,ol{margin:0;padding-left:1.5em}a:link,a:visited{color:#376bd5}a:hover{color:#ff5c07}a:active{color:#910}a img{border-style:none}table{border-top:1px solid #fff;border-collapse:collapse;width:100%}td{border-left:1px solid #d9d9d9;padding:5px 10px;width:50%}th{border-left:1px solid #d9d9d9;padding:5px 10px;width:50%;background-color:#eee;border-bottom:1px solid #d9d9d9;text-align:left}tr.alternate{background-color:#f1f5fa}table table{margin:10px 0;width:auto}table table th,table table td{background-color:#fff;border:1px solid #d9d9d9;padding:0.2em 0.5em;width:auto}form{border-top:1px solid #ccc;padding:1em;margin-top:1em}#title{background-color:#a1adcb;border-bottom:1px solid #b8bdc7;color:#444;padding:10px 10px;text-shadow:0px 1px 0px #cdd9fd}.section-name{background:url("../images/arrow_down.gif") no-repeat center left;color:#525252;cursor:pointer;display:block;font-size:1em;padding:5px 10px 5px 16px;text-shadow:0 1px 0 #fff;text-transform:uppercase}.deselected{background-image:url("../images/arrow_right.gif")}.section{border-color:#b8bdc7;border-style:solid;border-width:1px 0;background-color:white}.note{color:#999;font-size:0.9em}
148 sass/markdown-reference.scss
@@ -0,0 +1,148 @@
+/* General */
+
+body, input, textarea, select {
+ color: #222;
+ font: 9pt "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
+}
+
+body {
+ background-color: #d1d7e2;
+ line-height: 1.6em;
+ margin: 0;
+}
+
+/* Formatting */
+
+p {
+ margin-top: 0;
+}
+
+blockquote {
+ margin: 0.5em 2em;
+ color: #666;
+}
+
+/* Headings */
+
+h1, h2, h3 {
+ margin: 0;
+}
+
+h1 {
+ font-size: 1.6em;
+}
+
+h2 {
+ font-size: 1.4em;
+}
+
+h3 {
+ font-size: 1.2em;
+}
+
+/* Lists */
+
+ul, ol {
+ margin: 0;
+ padding-left: 1.5em;
+}
+
+/* Links */
+
+a {
+ &:link, &:visited {
+ color: #376bd5;
+}
+ &:hover {
+ color: #ff5c07;
+}
+ &:active {
+ color: #910;
+}
+ img {
+ border-style: none;
+}
+}
+
+/* Tables */
+
+table {
+ border-top: 1px solid #fff;
+ border-collapse: collapse;
+ width: 100%;
+}
+
+td {
+ border-left: 1px solid #d9d9d9;
+ padding: 5px 10px;
+ width: 50%;
+}
+
+th {
+ border-left: 1px solid #d9d9d9;
+ padding: 5px 10px;
+ width: 50%;
+ background-color: #eee;
+ border-bottom: 1px solid #d9d9d9;
+ text-align: left;
+}
+
+tr.alternate {
+ background-color: #f1f5fa;
+}
+
+table table {
+ margin: 10px 0;
+ width: auto;
+ th, td {
+ background-color: #fff;
+ border: 1px solid #d9d9d9;
+ padding: 0.2em 0.5em;
+ width: auto;
+}
+}
+
+/* Forms */
+
+form {
+ border-top: 1px solid #ccc;
+ padding: 1em;
+ margin-top: 1em;
+}
+
+/* Special */
+
+#title {
+ background-color: #a1adcb;
+ border-bottom: 1px solid #b8bdc7;
+ color: #444;
+ padding: 10px 10px;
+ text-shadow: 0px 1px 0px #cdd9fd;
+}
+
+.section-name {
+ background: url('../images/arrow_down.gif') no-repeat center left;
+ color: #525252;
+ cursor: pointer;
+ display: block;
+ font-size: 1em;
+ padding: 5px 10px 5px 16px;
+ text-shadow: 0 1px 0 #fff;
+ text-transform: uppercase;
+}
+
+.deselected {
+ background-image: url('../images/arrow_right.gif');
+}
+
+.section {
+ border-color: #b8bdc7;
+ border-style: solid;
+ border-width: 1px 0;
+ background-color: white;
+}
+
+.note {
+ color: #999;
+ font-size: 0.9em;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.