Mercurial > piecrust2

changeset 512:32612333a367

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
docs: Add some syntax highlighting to tutorial pages.
author Ludovic Chabant <ludovic@chabant.com>
date Sun, 26 Jul 2015 09:53:59 -0700
parents 1c452b7ab8b1
children dce482f7c62d
files docs/docs/01_tutorial/02_making-things-pretty.md docs/docs/01_tutorial/03_adding-colours.md docs/docs/02_general/04_how-it-works.md
diffstat 3 files changed, 88 insertions(+), 65 deletions(-) [+]
line wrap: on
line diff
--- a/docs/docs/01_tutorial/02_making-things-pretty.md	Sun Jul 26 09:53:09 2015 -0700
+++ b/docs/docs/01_tutorial/02_making-things-pretty.md	Sun Jul 26 09:53:59 2015 -0700
@@ -1,5 +1,6 @@
 ---
 title: "Part 2: Making Things Pretty"
+needs_pygments: true
 ---
 
 In the [first part of this tutorial][part1], we created a very simple blog with
@@ -56,16 +57,18 @@
 
 Second, change the code to:
 
-    {% raw %}
-    {% for post in pagination.posts %}
-    * {{post.date}} **[{{post.title}}]({{post.url}})**
-    {% endfor %}
+```htmldjango
+{% raw %}
+{% for post in pagination.posts %}
+* {{post.date}} **[{{post.title}}]({{post.url}})**
+{% endfor %}
 
-    <section>
-        {% if pagination.prev_page %}<div class="prev"><a href="{{ pagination.prev_page }}">Next Posts</a></div>{% endif %}
-        {% if pagination.next_page %}<div class="next"><a href="{{ pagination.next_page }}">Previous Posts</a></div>{% endif %}
-    </section>
-    {% endraw %}
+<section>
+    {% if pagination.prev_page %}<div class="prev"><a href="{{ pagination.prev_page }}">Next Posts</a></div>{% endif %}
+    {% if pagination.next_page %}<div class="next"><a href="{{ pagination.next_page }}">Previous Posts</a></div>{% endif %}
+</section>
+{% endraw %}
+```
 
 We're still showing links to the previous/next pagination at the bottom, but now
 instead of showing a classic river of posts, we're showing a concise and simple
@@ -84,11 +87,13 @@
 
 Let's change the loop to:
 
-    {% raw %}
-    {% for post in pagination.posts %}
-    * {{post.date}} **[{{post.title}}]({{post.url}})**{%if post.hint%}: {{post.hint}}{%endif%}
-    {% endfor %}
-    {% endraw %}
+```jinja
+{% raw %}
+{% for post in pagination.posts %}
+* {{post.date}} **[{{post.title}}]({{post.url}})**{%if post.hint%}: {{post.hint}}{%endif%}
+{% endfor %}
+{% endraw %}
+```
 
 This will show a post's `hint` if it is defined. Of course, if you refresh the
 page now, nothing will change.
@@ -96,10 +101,12 @@
 Now go into some of your posts, and add something like this to their
 configuration header:
 
-    ---
-    <existing configuration settings...>
-    hint: Where we announce things
-    ---
+```
+---
+<existing configuration settings...>
+hint: Where we announce things
+---
+```
 
 Refresh the home page, and you'll see this new piece of metadata displayed next
 to the post's title!
@@ -123,7 +130,11 @@
 Edit `templates/default.html` and replace the last line of the footer
 (_i.e._ just before `</footer>`) with this:
 
-    <p><a href="{{pcurl('about')}}">About this site</a> &ndash; {{ piecrust.branding|safe }}</p>
+```jinja
+{% raw %}
+<p><a href="{{pcurl('about')}}">About this site</a> &ndash; {{ piecrust.branding|safe }}</p>
+{% endraw %}
+```
 
 Refresh your browser, and you should see a link to the "_About_" page at the
 bottom of every page, including blog posts.
--- a/docs/docs/01_tutorial/03_adding-colours.md	Sun Jul 26 09:53:09 2015 -0700
+++ b/docs/docs/01_tutorial/03_adding-colours.md	Sun Jul 26 09:53:59 2015 -0700
@@ -13,7 +13,11 @@
 `{%raw%}{% if site.css %}{%endraw%}` and `{%raw%}{% endif %}{%endraw%}`. Replace
 it with:
 
-    <link rel="stylesheet" type="text/css" href="{{ site.root }}myblog.css"/>
+```htmldjango
+{% raw %}
+<link rel="stylesheet" type="text/css" href="{{ site.root }}myblog.css"/>
+{% endraw %}
+```
 
 Now create the file `assets/myblog.less`. Leave it empty for now.
 
@@ -29,33 +33,35 @@
 Now start writing some Less CSS code in the empty file (you can learn more about
 the Less CSS syntax on the [official website][less]):
 
-    @color-primary: #FF481C;
-    @color-secondary1: #083D78;
-    @color-secondary2: #CBF66E;
-    @color-secondary2-dark: #74AC00;
+```css
+@color-primary: #FF481C;
+@color-secondary1: #083D78;
+@color-secondary2: #CBF66E;
+@color-secondary2-dark: #74AC00;
 
-    body {
-        font-family: sans-serif;
-        color: @color-primary;
-        background: darken(@color-secondary1, 20%);
-    }
+body {
+    font-family: sans-serif;
+    color: @color-primary;
+    background: darken(@color-secondary1, 20%);
+}
 
-    a {
-        color: @color-secondary2;
-        text-decoration: none;
+a {
+    color: @color-secondary2;
+    text-decoration: none;
 
-        &:hover {
-            text-decoration: underline;
-        }
-        &:visited {
-            color: @color-secondary2-dark;
-        }
+    &:hover {
+        text-decoration: underline;
+    }
+    &:visited {
+        color: @color-secondary2-dark;
     }
+}
 
-    #container {
-        width: 640px;
-        margin: 0 auto;
-    }
+#container {
+    width: 640px;
+    margin: 0 auto;
+}
+```
 
 When you save, you should see that PieCrust picks it up right away and compiles
 the Less file into a CSS file that your browser can fetch.
--- a/docs/docs/02_general/04_how-it-works.md	Sun Jul 26 09:53:09 2015 -0700
+++ b/docs/docs/02_general/04_how-it-works.md	Sun Jul 26 09:53:59 2015 -0700
@@ -64,11 +64,13 @@
 
 The default formatter is [Markdown][]. So our page becomes:
 
-    <p>This page lists all the recipes written so far in Ludovic&#8217;s Blog:</p>
-    <ul>
-    <li><a href="/recipes/rhubarb-pie">Rhubarb Pie</a></li>
-    <li><a href="/recipes/pound-cake">Pound Cake</a></li>
-    </ul>
+```html
+<p>This page lists all the recipes written so far in Ludovic&#8217;s Blog:</p>
+<ul>
+<li><a href="/recipes/rhubarb-pie">Rhubarb Pie</a></li>
+<li><a href="/recipes/pound-cake">Pound Cake</a></li>
+</ul>
+```
 
 
 ### Layout rendering
@@ -78,27 +80,31 @@
 example page is using the `simple` layout, and if we assume the file
 `templates/simple.html` looks like this:
 
-    {%raw%}
-    <html>
-    <head><title>{{page.title}}</title></head>
-    <body>
-    {{content|safe}}
-    </body>
-    </html>
-    {%endraw%}
+```htmldjango
+{%raw%}
+<html>
+<head><title>{{page.title}}</title></head>
+<body>
+{{content|safe}}
+</body>
+</html>
+{%endraw%}
+```
 
 ...then our final page will be:
 
-    <html>
-    <head><title>All Recipes</title></head>
-    <body>
-    <p>This page lists all the recipes written so far in Ludovic&#8217;s Blog:</p>
-    <ul>
-    <li><a href="/recipes/rhubarb-pie">Rhubarb Pie</a></li>
-    <li><a href="/recipes/pound-cake">Pound Cake</a></li>
-    </ul>
-    </body>
-    </html>
+```html
+<html>
+<head><title>All Recipes</title></head>
+<body>
+<p>This page lists all the recipes written so far in Ludovic&#8217;s Blog:</p>
+<ul>
+<li><a href="/recipes/rhubarb-pie">Rhubarb Pie</a></li>
+<li><a href="/recipes/pound-cake">Pound Cake</a></li>
+</ul>
+</body>
+</html>
+```
 
 Of course, we glossed over a lot of things here, which you will want to learn
 about: