Skip to content

Instantly share code, notes, and snippets.

@rubylaser
Last active December 30, 2015 03:29

Revisions

  1. rubylaser revised this gist Dec 3, 2013. 3 changed files with 0 additions and 0 deletions.
    File renamed without changes.
    File renamed without changes.
    File renamed without changes.
  2. rubylaser created this gist Dec 3, 2013.
    3 changes: 3 additions & 0 deletions javascript
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    $(".markdown_link").live("click", function(e) {
    $(this).next(".markdown_examples").slideToggle();
    });
    44 changes: 44 additions & 0 deletions markdown
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    <div class="formatting">
    Use Markdown for formatting. <%= link_to "See examples.", "javascript:void(0)", :class => "markdown_link" %>
    <div class="markdown_examples" style="display: none">
    <table>
    <tr>
    <td><pre>[Link](http://example.com/)</pre></td>
    <td><a href="http://example.com/">Link</a></td>
    </tr>
    <tr>
    <td><pre>*Italic*</pre></td>
    <td><em>Italic</em></td>
    </tr>
    <tr>
    <td><pre>**Bold**</pre></td>
    <td><strong>Bold</strong></td>
    </tr>
    <tr>
    <td><pre>
    * Listed
    * Items
    </pre></td>
    <td><ul><li>Listed</li><li>Items</li></ul></td>
    </tr>
    <tr>
    <td><pre>&gt; Block quote</pre></td>
    <td><blockquote><p>Block quote</p></blockquote></td>
    </tr>
    <tr>
    <td><pre>`Inline code`</pre></td>
    <td><code>Inline code</code></td>
    </tr>
    <tr>
    <td>
    <pre>
    ``` ruby
    puts "code block"
    ```
    </pre>
    </td>
    <td><%= markdown("``` ruby\nputs \"code block\"\n```").html_safe %></td>
    </tr>
    </table>
    </div>
    </div>
    21 changes: 21 additions & 0 deletions style
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    .formatting {
    font-size: 12px;
    margin: 8px 0;
    }

    .markdown_examples {
    margin-top: 5px;
    }

    .markdown_examples table {
    border-collapse: collapse;
    }

    .markdown_examples table td {
    border: solid 1px #CCC;
    padding: 2px 10px;
    }

    .markdown_examples .code_block {
    width: 200px;
    }