<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Attribute Lists Extension — Python Markdown</title> <link rel="stylesheet" href="../default.css" type="text/css"> </head> <body> <div class="related"> <h3>Navigation</h3> <ul> <li class="right" style="margin-right: 10px"> <a href="../siteindex.html" title="General Index">index</a></li> <li class="right"> <a href="definition_lists.html" title="Definition Lists Extension" accesskey="N">next</a> |</li> <li class="right"> <a href="abbreviations.html" title="Abbreviations Extension" accesskey="P">previous</a> |</li> <li><img src="../py.png" alt="" style="vertical-align: middle; margin-top: -1px"/></li> <li><a href="../index.html">Python Markdown v2.4.1 documentation</a> »</li> <li><a href="index.html">Extensions</a> »</li> <li><a href="attr_list.html">Attribute Lists Extension</a> »</li> </ul> </div> <!-- .related --> <div class="document"> <div class="documentwrapper"> <div class="bodywrapper"> <div class="body"> <h1 id="attribute-lists">Attribute Lists<a class="headerlink" href="#attribute-lists" title="Permanent link">¶</a></h1> <h2 id="summary">Summary<a class="headerlink" href="#summary" title="Permanent link">¶</a></h2> <p>The Attribute Lists extension adds a syntax to define attributes on the various HTML elements in markdown’s output.</p> <p>This extension is included in the standard Markdown library.</p> <h2 id="syntax">Syntax<a class="headerlink" href="#syntax" title="Permanent link">¶</a></h2> <p>The basic syntax was inspired by <a href="http://maruku.rubyforge.org/proposal.html#attribute_lists">Maruku</a>‘s Attribute Lists feature.</p> <h3 id="the-list">The List<a class="headerlink" href="#the-list" title="Permanent link">¶</a></h3> <p>An example attribute list might look like this:</p> <pre><code>{: #someid .someclass somekey='some value' } </code></pre> <p>A word which starts with a hash (<code>#</code>) will set the id of an element.</p> <p>A word which starts with a dot (<code>.</code>) will be added to the list of classes assigned to an element.</p> <p>A key/value pair (<code>somekey='some value'</code>) will assign that pair to the element.</p> <p>Be aware that while the dot syntax will add to a class, using key/value pairs will always override the previously defined attribute. Consider the following:</p> <pre><code>{: #id1 .class1 id=id2 class="class2 class3" .class4 } </code></pre> <p>The above example would result in the following attributes being defined:</p> <pre><code>id="id2" class="class2 class3 class4" </code></pre> <h3 id="block-level">Block Level<a class="headerlink" href="#block-level" title="Permanent link">¶</a></h3> <p>To define attributes for a block level element, the attribute list should be defined on the last line of the block by itself.</p> <pre><code>This is a paragraph. {: #an_id .a_class } </code></pre> <p>The above results in the following output:</p> <pre><code><p id="an_id" class="a_class">This is a paragraph.</p> </code></pre> <p>The one exception is headers, as they are only ever allowed on one line.</p> <pre><code>A setext style header {: #setext} ================================= ### A hash style header ### {: #hash } </code></pre> <p>The above results in the following output:</p> <pre><code><h1 id="setext">A setext style header</h1> <h3 id="hash">A hash style header</h3> </code></pre> <h3 id="inline">Inline<a class="headerlink" href="#inline" title="Permanent link">¶</a></h3> <p>To define attributes on inline elements, the attribute list should be defined immediately after the inline element with no whitespace.</p> <pre><code>[link](http://example.com){: class="foo bar" title="Some title!" } </code></pre> <p>The above results in the following output:</p> <pre><code><p><a href="http://example.com" class="foo bar" title="Some title!">link</a></p> </code></pre> <h2 id="usage">Usage<a class="headerlink" href="#usage" title="Permanent link">¶</a></h2> <p>See <a href="index.html">Extensions</a> for general extension usage, specify <code>attr_list</code> as the name of the extension.</p> <p>This extension does not accept any special configuration options.</p> </div> <!-- .body --> </div> <!-- .bodywrapper --> </div> <!-- .documentwrapper --> <div class="sphinxsidebar"> <div class="sphinxsidebarwrapper"> <h3>Table Of Contents</h3> <div class="toc"> <ul> <li><a href="#attribute-lists">Attribute Lists</a><ul> <li><a href="#summary">Summary</a></li> <li><a href="#syntax">Syntax</a><ul> <li><a href="#the-list">The List</a></li> <li><a href="#block-level">Block Level</a></li> <li><a href="#inline">Inline</a></li> </ul> </li> <li><a href="#usage">Usage</a></li> </ul> </li> </ul> </div> <h4>Previous topic</h4> <p class="topless"><a href="abbreviations.html" title="previous chapter">Abbreviations Extension</a></p> <h4>Next topic</h4> <p class="topless"><a href="definition_lists.html" title="next chapter">Definition Lists Extension</a></p> <h3>This Page</h3> <ul class="this-page-menu"> <li><a href="https://github.com/waylan/Python-Markdown/issues" >Report a Bug</a></li> <li><a href="attr_list.txt" rel="nofollow">Show Source</a></li> </ul> </div> <!-- .sphinxsidebarwrapper --> </div> <!-- .sphinxsidebar --> <div class="clearer"></div> </div> <!-- .document --> <div class="related"> <h3>Navigation</h3> <ul> <li class="right" style="margin-right: 10px"> <a href="../siteindex.html" title="General Index">index</a></li> <li class="right"> <a href="definition_lists.html" title="Definition Lists Extension" accesskey="N">next</a> |</li> <li class="right"> <a href="abbreviations.html" title="Abbreviations Extension" accesskey="P">previous</a> |</li> <li><img src="../py.png" alt="" style="vertical-align: middle; margin-top: -1px"/></li> <li><a href="../index.html">Python Markdown v2.4.1 documentation</a> »</li> <li><a href="index.html">Extensions</a> »</li> <li><a href="attr_list.html">Attribute Lists Extension</a> »</li> </ul> </div> <!-- .related --> <div class="footer">© 2010-2012 Python Markdown Project</div> </body> </html>