Feature: add markdown extensions

papery/data/sample/pages/index.md

@@ -9,20 +9,97 @@ Welecome to my web site with [papery](http://github.com/withletters/papery)
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+## Table
+
 | Header 1 | *Header* 2 |
 | -------- | -------- |
 | `Cell 1` | [Cell 2](http://example.com) link |
 | Cell 3 | **Cell 4** |
 
+
+## Code block
+
+Text
+
 ``` text
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 ```
 
+Python
+
 ``` python
 def factorial(x):
     if x == 0:
         return 1
     else:
         return x * factorial(x - 1)
 ```
+
+## Permalink
+
+### Permalink h3
+
+#### Permalink h4
+
+##### Permalink h5
+
+###### Permalink h6
+
+Hovering header title, a permalink symbol `¶` is appear.
+
+### CSS
+
+The permalink symbol is classified as `headerlink`. For better apperances, apply the CSS like below.
+
+``` css
+.headerlink {
+  color: gray;
+  cursor: pointer;
+  padding: 0px 5px;
+  text-decoration: none;
+  visibility: hidden;
+}
+
+.headerlink:hover {
+  color: blue;
+}
+
+h1:hover .headerlink {
+  visibility: visible;
+}
+
+h2:hover .headerlink {
+  visibility: visible;
+}
+
+h3:hover .headerlink {
+  visibility: visible;
+}
+
+...
+
+```
+
+## Markdown in HTML
+
+<details markdown="block">
+<summary> How to use </summary>
+
+#### Markdown text
+
+- A *Markdown* text
+- Here is a example with `details` element
+
+``` html
+<details markdown="block">
+<summary> Example </summary>
+
+#### Example
+
+Something Markdown text...
+
+</details>
+```
+
+</details>

papery/data/sample/themes/default/assets/css/style.css

@@ -1,60 +1,60 @@
 @charset "utf-8";
 
 body {
-    background: #f0f0f0;
-    font-family: Verdana, sans-serif;
-    margin: 0;
+  background: #f0f0f0;
+  font-family: Verdana, sans-serif;
+  margin: 0;
 }
 
 a {
-    text-decoration: none;
-    color: #999;
+  text-decoration: none;
+  color: #999;
 }
 
 a:hover {
-    color: #000 !important;
+  color: #000;
 }
 
 #container {
-    padding: 30px;
+  padding: 30px;
 }
 
 footer {
-    clear: both;
-    background: #dcdcdc;
-    width: 100%;
-    position: relative;
+  clear: both;
+  background: #dcdcdc;
+  width: 100%;
+  position: relative;
 }
 
 footer p {
-    padding: 3px;
-    text-align: center;
-    font-size: 10px;
-    color: #999;
+  padding: 3px;
+  text-align: center;
+  font-size: 10px;
+  color: #999;
 }
 
 #page {
 }
 
 #page h1 {
-    font-size: 24px;
-    font-weight: bold;
+  font-size: 24px;
+  font-weight: bold;
 }
 
 #page h2 {
-    font-size: 20px;
-    font-weight: bold;
+  font-size: 20px;
+  font-weight: bold;
 }
 
 #page h3 {
-    font-size: 18px;
+  font-size: 18px;
   padding: 30px 0 20px 0;
-    font-weight: bold;
+  font-weight: bold;
 }
 
 #page h4 {
   padding: 0 0 20px;
-    font-weight: bold;
+  font-weight: bold;
 }
 
 #page p {
@@ -75,12 +75,48 @@ table tr th {
 }
 
 table tr td {
-    padding: 10px 20px;
-    border-bottom: 1px solid #e1e1e1;
+  padding: 10px 20px;
+  border-bottom: 1px solid #e1e1e1;
 }
 
 .emojione, .twemoji, .gemoji {
   display: inline-flex;
   height: 1.25em;
   vertical-align: text-top;
 }
+
+.headerlink {
+  color: gray;
+  cursor: pointer;
+  padding: 0px 5px;
+  text-decoration: none;
+  visibility: hidden;
+}
+
+.headerlink:hover {
+  color: blue;
+}
+
+h1:hover .headerlink {
+  visibility: visible;
+}
+
+h2:hover .headerlink {
+  visibility: visible;
+}
+
+h3:hover .headerlink {
+  visibility: visible;
+}
+
+h4:hover .headerlink {
+  visibility: visible;
+}
+
+h5:hover .headerlink {
+  visibility: visible;
+}
+
+h6:hover .headerlink {
+  visibility: visible;
+}

papery/page.py

@@ -24,6 +24,7 @@
 from jinja2 import meta
 
 import markdown
+import markdown.extensions.toc
 import pymdownx.emoji
 import json
 import yaml
@@ -52,7 +53,12 @@ def text(self, lang=None, link=None):
         fp.close()
 
         html = markdown.markdown(text,
-                                 extensions=["tables", "fenced_code", "codehilite", "pymdownx.emoji"],
+                                 extensions=["tables",
+                                             "fenced_code",
+                                             "codehilite",
+                                             "pymdownx.emoji",
+                                             "md_in_html",
+                                             "toc"],
                                  extension_configs={
                                      "codehilite": {
                                          "noclasses": "True"
@@ -63,7 +69,11 @@ def text(self, lang=None, link=None):
                                          "alt": "short",
                                          "options": {
                                              # TODO make "image_path" configurable by papery's configuration file for security reasons
-                                         }}})
+                                         }},
+                                     "toc": {
+                                         "permalink": "True",
+                                         "slugify": markdown.extensions.toc.slugify_unicode
+                                     }})
         if link is None:
             return html
         else: