From 6075e6a9c8d867bf36229799977df38b36aecac5 Mon Sep 17 00:00:00 2001
From: Lektor Bot <bot@getlektor.com>
Date: Sun, 7 Aug 2022 03:06:28 +0000
Subject: [PATCH] Synchronized build

---
 index.html                                    |  6 +--
 plugins/lektor-atom/index.html                | 12 ++---
 plugins/lektor-disqus-comments/index.html     |  6 +--
 plugins/lektor-expression-type/index.html     |  2 +-
 plugins/lektor-git-timestamp/index.html       |  4 +-
 plugins/lektor-google-analytics/index.html    | 10 ++--
 plugins/lektor-google-search/index.html       |  6 +--
 plugins/lektor-gulp/index.html                |  6 +--
 plugins/lektor-htmlmin/index.html             |  4 +-
 plugins/lektor-image-resize/index.html        |  6 +--
 plugins/lektor-jinja-content/index.html       |  6 +--
 plugins/lektor-limit-dependencies/index.html  |  4 +-
 plugins/lektor-make/index.html                |  2 +-
 .../lektor-markdown-header-anchors/index.html |  4 +-
 .../lektor-markdown-highlighter/index.html    |  8 ++--
 plugins/lektor-netlify/index.html             | 10 ++--
 plugins/lektor-npm-support/index.html         | 14 +++---
 plugins/lektor-polymorphic-type/index.html    |  4 +-
 plugins/lektor-qiniu/index.html               | 14 +++---
 plugins/lektor-s3/index.html                  | 14 +++---
 plugins/lektor-scss/index.html                |  8 ++--
 plugins/lektor-scsscompile/index.html         |  8 ++--
 plugins/lektor-strip-html-tags/index.html     |  2 +-
 plugins/lektor-surge/index.html               |  4 +-
 plugins/lektor-tags/index.html                | 48 +++++++++----------
 plugins/lektor-tailwind/index.html            |  8 ++--
 plugins/lektor-webpack-html-helper/index.html |  4 +-
 plugins/lektor-webpack-support/index.html     |  8 ++--
 plugins/lektor-yandex-metrica/index.html      |  6 +--
 29 files changed, 119 insertions(+), 119 deletions(-)

diff --git a/index.html b/index.html
index 04a21000..c23512de 100644
--- a/index.html
+++ b/index.html
@@ -151,7 +151,7 @@ speak multiple languages and allow you to easily create localized websites.</li>
 <div class="slideshow-wrapper">
   <div class="slideshow">
     <div class="slideshow-inner">
-      <div class="carousel slide" data-ride="carousel" data-interval="8500" id="carousel-6bbfbcd263bc47d4834233e7d2c6c79d">
+      <div class="carousel slide" data-ride="carousel" data-interval="8500" id="carousel-e8d6663b8f4947908035aa26292dba98">
         
         <div class="carousel-inner" role="listbox">
           
@@ -210,11 +210,11 @@ be completely customized.</p>
           </div>
           
         </div>
-        <a class="left carousel-control" href="#carousel-6bbfbcd263bc47d4834233e7d2c6c79d" role="button" data-slide="prev">
+        <a class="left carousel-control" href="#carousel-e8d6663b8f4947908035aa26292dba98" role="button" data-slide="prev">
           <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
           <span class="sr-only">Previous</span>
         </a>
-        <a class="right carousel-control" href="#carousel-6bbfbcd263bc47d4834233e7d2c6c79d" role="button" data-slide="next">
+        <a class="right carousel-control" href="#carousel-e8d6663b8f4947908035aa26292dba98" role="button" data-slide="next">
           <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
           <span class="sr-only">Next</span>
         </a>
diff --git a/plugins/lektor-atom/index.html b/plugins/lektor-atom/index.html
index ee643c88..34973683 100644
--- a/plugins/lektor-atom/index.html
+++ b/plugins/lektor-atom/index.html
@@ -138,18 +138,18 @@
 <p>Inspired by the <a href="https://github.com/lektor/lektor-website/tree/master/packages/atom-feed-support" rel="nofollow">atom-feed-support</a> plugin Armin Ronacher wrote for the Lektor official blog.</p>
 <h2>Installation</h2>
 <p>Add lektor-atom to your project from command line:</p>
-<pre>lektor plugins add lektor-atom
+<pre lang="sh">lektor plugins add lektor-atom
 </pre>
 <p>See <a href="https://www.getlektor.com/docs/plugins/" rel="nofollow">the Lektor documentation for more instructions on installing plugins</a>.</p>
 <h2>Configuration</h2>
 <p>Here is a basic configuration:</p>
-<pre><span class="k">[feed]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[feed]</span><span class="w"></span>
 <span class="na">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">My Site&#39;s Blog</span><span class="w"></span>
 <span class="na">source_path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">/blog</span><span class="w"></span>
 <span class="na">url_path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">/feed.xml</span><span class="w"></span>
 </pre>
 <p>For each feed you want to publish, add a section to <code>configs/atom.ini</code>. For example, a blog with a feed of all recent posts, and a feed of recent posts about coffee:</p>
-<pre><span class="k">[blog]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[blog]</span><span class="w"></span>
 <span class="na">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">My Blog</span><span class="w"></span>
 <span class="na">source_path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">/</span><span class="w"></span>
 <span class="na">url_path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">/feed.xml</span><span class="w"></span>
@@ -243,7 +243,7 @@
 </table>
 <h3>Customizing the plugin for your models</h3>
 <p>Use the field options to tell lektor-atom how to read your items. For example, if your site's model is:</p>
-<pre><span class="k">[model]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[model]</span><span class="w"></span>
 <span class="na">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">Blog</span><span class="w"></span>
 
 <span class="k">[fields.writer]</span><span class="w"></span>
@@ -253,7 +253,7 @@
 <span class="na">type</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">string</span><span class="w"></span>
 </pre>
 <p>Then add to atom.ini:</p>
-<pre><span class="k">[main]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[main]</span><span class="w"></span>
 <span class="na">blog_author_field</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">writer</span><span class="w"></span>
 <span class="na">blog_summary_field</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">short_description</span><span class="w"></span>
 </pre>
@@ -263,7 +263,7 @@
 <p>Set <code>items</code> to any query expression to override the default. If <code>items_model</code> is <em>also</em> specified, lektor-atom applies it as a filter to <code>items</code>.</p>
 <h2>Use In Templates</h2>
 <p>You can link to a specific feed in your template. If your <code>atom.ini</code> contains a feed like this:</p>
-<pre><span class="k">[main]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[main]</span><span class="w"></span>
 <span class="na">source_path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">/blog</span><span class="w"></span>
 </pre>
 <p>Link to the feed in a template like this:</p>
diff --git a/plugins/lektor-disqus-comments/index.html b/plugins/lektor-disqus-comments/index.html
index 933bdc73..9aff6e96 100644
--- a/plugins/lektor-disqus-comments/index.html
+++ b/plugins/lektor-disqus-comments/index.html
@@ -139,20 +139,20 @@ enabled a <code>render_disqus_comments</code> function which can render a disqus
 box.</p>
 <h2>Enabling the Plugin</h2>
 <p>To enable the plugin add this to your project file:</p>
-<pre>$ lektor plugins add lektor-disqus-comments
+<pre lang="shell">$ lektor plugins add lektor-disqus-comments
 </pre>
 <h2>Configuring the Plugin</h2>
 <p>The plugin has a config file that is needed to inform it about your
 website.  Just create a file named <code>disqus-comments.ini</code> into your
 <code>configs/</code> folder and configure the <code>shortname</code> key with the name of
 your disqus community:</p>
-<pre><span class="na">shortname</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">YOUR_SHORTNAME</span><span class="w"></span>
+<pre lang="ini"><span class="na">shortname</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">YOUR_SHORTNAME</span><span class="w"></span>
 </pre>
 <h2>In Templates</h2>
 <p>Now you can add a discussion box to any of your templates by just using
 the <code>render_disqus_comments</code> function.  Just calling it is enough to
 get the comment box:</p>
-<pre><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;comments&quot;</span><span class="p">&gt;</span>{{ render_disqus_comments() }}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+<pre lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;comments&quot;</span><span class="p">&gt;</span>{{ render_disqus_comments() }}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
 </pre>
 <p>Optionally the function accepts a few arguemnts:</p>
 <ul>
diff --git a/plugins/lektor-expression-type/index.html b/plugins/lektor-expression-type/index.html
index a56300f5..fb4017dc 100644
--- a/plugins/lektor-expression-type/index.html
+++ b/plugins/lektor-expression-type/index.html
@@ -161,7 +161,7 @@ will always evaluate to a string.</p>
 be used display lists of other pages on your site.
 You could create a model definition like this (called, perhaps,
 <code>models/index.ini</code>):</p>
-<pre><span class="k">[model]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[model]</span><span class="w"></span>
 <span class="na">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">Index Page</span><span class="w"></span>
 <span class="na">label</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">Index: {{ this.title}}</span><span class="w"></span>
 
diff --git a/plugins/lektor-git-timestamp/index.html b/plugins/lektor-git-timestamp/index.html
index c4d1d677..723c2bd9 100644
--- a/plugins/lektor-git-timestamp/index.html
+++ b/plugins/lektor-git-timestamp/index.html
@@ -190,7 +190,7 @@ this will select the minimum of all the timestamps remaining after any filtering
 </ul>
 <h2>Examples</h2>
 <p>Here is a simple example excerpt from a datamodel file:</p>
-<pre><span class="na">&lt;...&gt;</span><span class="w"></span>
+<pre lang="ini"><span class="na">&lt;...&gt;</span><span class="w"></span>
 
 <span class="k">[fields.last_mod]</span><span class="w"></span>
 <span class="na">label</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">Time last modified</span><span class="w"></span>
@@ -203,7 +203,7 @@ affected that <code>contents.lr</code>.  (Or if that file is dirty, the value of
 <code>last_mod</code> will be taken from the file’s filesystem mtime.)</p>
 <hr>
 <p>Here is a more complicated example which demonstrates the use of all the options.</p>
-<pre><span class="na">&lt;...&gt;</span><span class="w"></span>
+<pre lang="ini"><span class="na">&lt;...&gt;</span><span class="w"></span>
 
 <span class="k">[fields.pub_date]</span><span class="w"></span>
 <span class="na">label</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">Time first published</span><span class="w"></span>
diff --git a/plugins/lektor-google-analytics/index.html b/plugins/lektor-google-analytics/index.html
index 89c5fbcf..222d5d14 100644
--- a/plugins/lektor-google-analytics/index.html
+++ b/plugins/lektor-google-analytics/index.html
@@ -135,16 +135,16 @@
 is available to be included in target <tt>template</tt> which automatically
 include Google-Analytics code in final HTML files rendered by
 <tt>Lektor</tt>.</p>
-<div id="basic-usage">
+<div class="section" id="basic-usage">
 <h2>Basic Usage</h2>
-<div id="enabling-the-plugin">
+<div class="section" id="enabling-the-plugin">
 <h3>Enabling the Plugin</h3>
 <p>To enable the plugin add this to your project file:</p>
 <pre><span class="k">[packages]</span><span class="w">
 </span><span class="na">lektor-google-analytics</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">0.1</span>
 </pre>
 </div>
-<div id="configuring-the-plugin">
+<div class="section" id="configuring-the-plugin">
 <h3>Configuring the Plugin</h3>
 <p>The plugin needs a config file with your <tt>Google analytics</tt> code in
 it.</p>
@@ -155,7 +155,7 @@ folder in your Lektor project’s base directory. And, put the
 <pre><span class="na">GOOGLE_ANALYTICS_ID</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">UA-XXXXXXXX-Y</span>
 </pre>
 </div>
-<div id="using-in-templates">
+<div class="section" id="using-in-templates">
 <h3>Using in Templates</h3>
 <p>Now you can add a Google analytics code-snippet in your templates by
 just calling the <tt>generate_google_analytics</tt> function inside its <tt>&lt;body&gt; &lt;/body&gt;</tt> tags.</p>
@@ -165,7 +165,7 @@ just calling the <tt>generate_google_analytics</tt> function inside its <tt>&lt;
 include Google-Analytics code automatically.</p>
 </div>
 </div>
-<div id="advanced">
+<div class="section" id="advanced">
 <h2>Advanced</h2>
 <dl>
 <dt>You can use <tt>GOOGLE_ANALYTICS_PROPERTY</tt> property to include your</dt>
diff --git a/plugins/lektor-google-search/index.html b/plugins/lektor-google-search/index.html
index c91ccf73..2268f680 100644
--- a/plugins/lektor-google-search/index.html
+++ b/plugins/lektor-google-search/index.html
@@ -140,7 +140,7 @@ include Google-Search code in final HTML fles rendered by Lektor.</p>
 <h2>How to Use the plugin ?</h2>
 <h3>Enable the plugin</h3>
 <p>To enable the plugin, add the following to your <code>.lektorproject</code> file:</p>
-<pre><span class="k">[packages]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[packages]</span><span class="w"></span>
 <span class="na">lektor-google-search</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">0.1</span><span class="w"></span>
 </pre>
 <h3>Configure the plugin</h3>
@@ -149,11 +149,11 @@ include Google-Search code in final HTML fles rendered by Lektor.</p>
 <li>Create a file named <code>google-serch.ini</code> into <code>./configs</code> folder in your lektor project's base directory.</li>
 <li>Put the <code>SEARCH_ENGINE_ID</code> key with the value of your serch engine ID.</li>
 </ul>
-<pre><span class="na">SEARCH_ENGINE_ID</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">83892839209432084</span><span class="w"></span>
+<pre lang="ini"><span class="na">SEARCH_ENGINE_ID</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">83892839209432084</span><span class="w"></span>
 </pre>
 <h3>Usage in template</h3>
 <p>Add Google Search code snippet by calling the function <code>render_google_search()</code> in the template of your preference where you want the search box to appear.</p>
-<pre><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{ render_googe_search() }}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+<pre lang="html"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{ render_googe_search() }}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
 </pre>
 <p>Now, try to run <code>lektor server</code> to see the google search appear.</p>
  
diff --git a/plugins/lektor-gulp/index.html b/plugins/lektor-gulp/index.html
index 5d38d2b8..88b13d15 100644
--- a/plugins/lektor-gulp/index.html
+++ b/plugins/lektor-gulp/index.html
@@ -144,7 +144,7 @@ enabled with the <tt><span class="pre">-f</span> gulp</tt> flag it runs <tt>npm
 gulp <tt>default</tt> or <tt>watch</tt> tasks as they are defined into your own
 <tt>gulpfile.js</tt>.</p>
 <p>The general documentation about Lektor plugins is <a href="https://www.getlektor.com/docs/plugins/" rel="nofollow">here</a>.</p>
-<div id="lektor-build">
+<div class="section" id="lektor-build">
 <h2>lektor build</h2>
 <p>The command <tt>lektor build <span class="pre">-f</span> gulp</tt> runs the <strong>``default``</strong> gulp task,
 for example defined as something like:</p>
@@ -154,7 +154,7 @@ gulp.task('default', ['build'], () =&gt; { });
 <p>In the above example the <tt>default</tt> task points to a <tt>build</tt> task,
 which is usually composed by several other gulp tasks, etc.</p>
 </div>
-<div id="lektor-server">
+<div class="section" id="lektor-server">
 <h2>lektor server</h2>
 <p>The command <tt>lektor server <span class="pre">-f</span> gulp</tt> runs the Lektor embedded server on
 <a href="http://localhost:5000" rel="nofollow">http://localhost:5000</a>, starting a gulp <strong>``watch``</strong> task in background.
@@ -169,7 +169,7 @@ the <tt>lib/</tt> folder then assets could be minified, concatenated and
 copied into the standard <tt>assets/static/</tt> lektor folder, or whatever
 is defined into your own <tt>gulpfile.js</tt>.</p>
 </div>
-<div id="credits">
+<div class="section" id="credits">
 <h2>Credits</h2>
 <p>This plugin is based on the official <a href="https://github.com/lektor/lektor-webpack-support" rel="nofollow">Webpack plugin</a> with very little
 differences.</p>
diff --git a/plugins/lektor-htmlmin/index.html b/plugins/lektor-htmlmin/index.html
index e13bb49f..b749887a 100644
--- a/plugins/lektor-htmlmin/index.html
+++ b/plugins/lektor-htmlmin/index.html
@@ -134,7 +134,7 @@
 <p>HTML minifier for Lektor that automatically minifies generated .html files.</p>
 <p>Uses <a href="https://github.com/mankyd/htmlmin" rel="nofollow">htmlmin</a> and looks for .html files,
 minifying them as part of the build process.</p>
-<div id="installing">
+<div class="section" id="installing">
 <h2>Installing</h2>
 <p>You can install the plugin with Lektor’s installer:</p>
 <pre>lektor plugins add lektor-htmlmin
@@ -144,7 +144,7 @@ minifying them as part of the build process.</p>
 lektor-htmlmin = 1.0
 </pre>
 </div>
-<div id="usage">
+<div class="section" id="usage">
 <h2>Usage</h2>
 <p>To enable minification, pass the <cite>htmlmin</cite> flag when starting the development
 server or when running a build:</p>
diff --git a/plugins/lektor-image-resize/index.html b/plugins/lektor-image-resize/index.html
index e9aeba27..2f37c5e5 100644
--- a/plugins/lektor-image-resize/index.html
+++ b/plugins/lektor-image-resize/index.html
@@ -145,7 +145,7 @@ The difference between this plugin and the lektor <a href="https://www.getlektor
 For example, you may have an image called <code>waffle.jpg</code>, and to link to it in the content (not the template), but also show a thumbnail.
 All images will be converted to webp using <a href="https://pypi.org/project/Pillow/" rel="nofollow">Pillow</a>.</p>
 <p>You can use the images like that:</p>
-<pre><span class="cm">&lt;!-- Simple example --&gt;</span>
+<pre lang="html"><span class="cm">&lt;!-- Simple example --&gt;</span>
 <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;waffle.jpg&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;waffle-small.jpg&quot;</span> <span class="p">/&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
 
 <span class="cm">&lt;!-- example with srcset --&gt;</span>
@@ -159,7 +159,7 @@ All images will be converted to webp using <a href="https://pypi.org/project/Pil
 </pre>
 <h2>Installation</h2>
 <p>To install the plugin, add <code>lektor-image-resize</code> to your plugins from the command line and create a config file:</p>
-<pre><span class="c1"># add the plugin to lektor</span>
+<pre lang="bash"><span class="c1"># add the plugin to lektor</span>
 lektor plugins add lektor-image-resize
 </pre>
 <p>If you have trouble, see the <a href="https://www.getlektor.com/docs/plugins/" rel="nofollow">plugin
@@ -169,7 +169,7 @@ documentation.</p>
 a few sections for images. The section names can be whatever you want, the
 final images will be called <code>$(imagename)-$(sectionname).jpg</code> and <code>$(imagename)-$(sectionname).webp</code>.</p>
 <p>Here is a example config file:</p>
-<pre><span class="k">[small]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[small]</span><span class="w"></span>
 <span class="na">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">640</span><span class="w"></span>
 <span class="na">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">360</span><span class="w"></span>
 
diff --git a/plugins/lektor-jinja-content/index.html b/plugins/lektor-jinja-content/index.html
index f434dd43..99d05500 100644
--- a/plugins/lektor-jinja-content/index.html
+++ b/plugins/lektor-jinja-content/index.html
@@ -149,7 +149,7 @@
 <h2>Examples</h2>
 <p>Querying context: <code>{{ site.get('/').title }}</code> or <code>{{ this.path }}</code></p>
 <p>Logic:</p>
-<pre><span class="cp">{%</span> <span class="k">set</span> <span class="nv">meaning_of_life</span><span class="o">,</span> <span class="nv">meaning_of_universe</span> <span class="o">=</span> <span class="nv">this.life</span><span class="o">,</span> <span class="nv">this.universe</span> <span class="cp">%}</span><span class="x"></span>
+<pre lang="jinja"><span class="cp">{%</span> <span class="k">set</span> <span class="nv">meaning_of_life</span><span class="o">,</span> <span class="nv">meaning_of_universe</span> <span class="o">=</span> <span class="nv">this.life</span><span class="o">,</span> <span class="nv">this.universe</span> <span class="cp">%}</span><span class="x"></span>
 <span class="cp">{%</span> <span class="k">if</span> <span class="nv">meaning_of_life</span> <span class="o">==</span> <span class="nv">meaning_of_universe</span> <span class="o">==</span> <span class="m">42</span> <span class="cp">%}</span><span class="x"></span>
 <span class="x">  </span><span class="cp">{%</span> <span class="k">set</span> <span class="nv">meaning_of_it_all</span> <span class="o">=</span> <span class="nv">meaning_of_life</span> <span class="cp">%}</span><span class="x"></span>
 <span class="cp">{%</span> <span class="k">else</span> <span class="cp">%}</span><span class="x"></span>
@@ -158,10 +158,10 @@
 <span class="cp">{{</span> <span class="nv">meaning_of_it_all</span> <span class="cp">}}</span><span class="x"></span>
 </pre>
 <p>Jinja in Markdown:</p>
-<pre><span class="x">[link text](</span><span class="cp">{{</span> <span class="nv">this</span><span class="o">|</span><span class="nf">url</span> <span class="cp">}}</span><span class="x">)</span>
+<pre lang="jinja"><span class="x">[link text](</span><span class="cp">{{</span> <span class="nv">this</span><span class="o">|</span><span class="nf">url</span> <span class="cp">}}</span><span class="x">)</span>
 </pre>
 <p>Jinja in reStructuredText:</p>
-<pre><span class="x">`link text &lt;</span><span class="cp">{{</span> <span class="nv">this</span><span class="o">|</span><span class="nf">url</span> <span class="cp">}}</span><span class="x">&gt;`_</span>
+<pre lang="jinja"><span class="x">`link text &lt;</span><span class="cp">{{</span> <span class="nv">this</span><span class="o">|</span><span class="nf">url</span> <span class="cp">}}</span><span class="x">&gt;`_</span>
 </pre>
 <p>Try running the <a href="https://github.com/terminal-labs/lektor-jinja-content/blob/master/tests/demo-project/" rel="nofollow">test site</a> for more examples.</p>
 <h2>Possible future of this plugin.</h2>
diff --git a/plugins/lektor-limit-dependencies/index.html b/plugins/lektor-limit-dependencies/index.html
index 45359733..6b0879e4 100644
--- a/plugins/lektor-limit-dependencies/index.html
+++ b/plugins/lektor-limit-dependencies/index.html
@@ -140,7 +140,7 @@ control.</p>
 <p>Suppose that you would like to list the three most recent blog posts
 in the sidebar of your Lektor-based site.  This can be done by adding
 something like to your site base template:</p>
-<pre><span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>Recent Posts<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
+<pre lang="html+jinja"><span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>Recent Posts<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
 <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
   <span class="cp">{%</span> <span class="k">for</span> <span class="nv">post</span> <span class="k">in</span> <span class="nv">site.query</span><span class="o">(</span><span class="s1">&#39;/blog&#39;</span><span class="o">)</span><span class="nv">.order_by</span><span class="o">(</span><span class="s1">&#39;-pub_date&#39;</span><span class="o">)</span><span class="nv">.limit</span><span class="o">(</span><span class="m">3</span><span class="o">)</span> <span class="cp">%}</span>
     <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">{{</span> <span class="nv">post</span><span class="o">|</span><span class="nf">url</span> <span class="cp">}}</span><span class="s">&quot;</span><span class="p">&gt;</span><span class="cp">{{</span> <span class="nv">post.title</span> <span class="cp">}}</span><span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
@@ -184,7 +184,7 @@ gets covered, too, since when the resulting query is iterated over in
 the <code>{% for %}</code> loop, dependencies will be recorded on the three
 most-recent posts.)</p>
 <p>Thus, the example above, if replaced by:</p>
-<pre><span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>Recent Posts<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
+<pre lang="html+jinja"><span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>Recent Posts<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
 <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
   <span class="cp">{%</span> <span class="k">for</span> <span class="nv">post</span> <span class="k">in</span> <span class="nv">site.query</span><span class="o">(</span><span class="s1">&#39;/blog&#39;</span><span class="o">)</span><span class="nv">.order_by</span><span class="o">(</span><span class="s1">&#39;-pub_date&#39;</span><span class="o">)</span><span class="nv">.limit</span><span class="o">(</span><span class="m">3</span><span class="o">)|</span><span class="nf">limit_dependencies</span> <span class="cp">%}</span>
     <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">{{</span> <span class="nv">post</span><span class="o">|</span><span class="nf">url</span> <span class="cp">}}</span><span class="s">&quot;</span><span class="p">&gt;</span><span class="cp">{{</span> <span class="nv">post.title</span> <span class="cp">}}</span><span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
diff --git a/plugins/lektor-make/index.html b/plugins/lektor-make/index.html
index 6657d93b..3cb7cd0d 100644
--- a/plugins/lektor-make/index.html
+++ b/plugins/lektor-make/index.html
@@ -118,7 +118,7 @@
           <a href="https://lektor-make.readthedocs.io/en/latest/" rel="nofollow"><img alt="https://readthedocs.org/projects/lektor-make/badge/?version=latest" src="https://readthedocs.org/projects/lektor-make/badge/?version=latest"></a>
 <a href="https://pypi.org/project/lektor-make" rel="nofollow"><img alt="https://img.shields.io/pypi/v/lektor-make?color=success" src="https://img.shields.io/pypi/v/lektor-make?color=success"></a>
 <p>Lektor plugin to run <cite>make lektor</cite> for custom build systems.</p>
-<div id="install">
+<div class="section" id="install">
 <h2>Install</h2>
 <pre>python3 -m pip install lektor-make
 </pre>
diff --git a/plugins/lektor-markdown-header-anchors/index.html b/plugins/lektor-markdown-header-anchors/index.html
index db9a4be4..708766d4 100644
--- a/plugins/lektor-markdown-header-anchors/index.html
+++ b/plugins/lektor-markdown-header-anchors/index.html
@@ -147,7 +147,7 @@
 are given anchors and a table of contents is collected.</p>
 <h2>Enabling the Plugin</h2>
 <p>To enable the plugin run this command:</p>
-<pre>$ lektor plugins add markdown-header-anchors
+<pre lang="shell">$ lektor plugins add markdown-header-anchors
 </pre>
 <h2>In Templates</h2>
 <p>Within templates it becomes possible to access the <code>.toc</code> property of
@@ -158,7 +158,7 @@ markdown data.  It's a list where each item has the following attributes:</p>
 <li><code>children</code>: a list of headers below that header</li>
 </ul>
 <p>Example rendering:</p>
-<pre><span class="x">&lt;h4&gt;Table Of Contents&lt;/h4&gt;</span>
+<pre lang="jinja"><span class="x">&lt;h4&gt;Table Of Contents&lt;/h4&gt;</span>
 <span class="x">&lt;ul class=&quot;toc&quot;&gt;</span>
 <span class="cp">{%</span> <span class="k">for</span> <span class="nv">item</span> <span class="k">in</span> <span class="nv">this.body.toc</span> <span class="k">recursive</span> <span class="cp">%}</span><span class="x"></span>
 <span class="x">  &lt;li&gt;&lt;a href=&quot;#</span><span class="cp">{{</span> <span class="nv">item.anchor</span> <span class="cp">}}</span><span class="x">&quot;&gt;</span><span class="cp">{{</span> <span class="nv">item.title</span> <span class="cp">}}</span><span class="x">&lt;/a&gt;</span><span class="cp">{%</span>
diff --git a/plugins/lektor-markdown-highlighter/index.html b/plugins/lektor-markdown-highlighter/index.html
index dd0fc8ca..4da4da94 100644
--- a/plugins/lektor-markdown-highlighter/index.html
+++ b/plugins/lektor-markdown-highlighter/index.html
@@ -141,13 +141,13 @@
 Lektor's markdown support.</p>
 <h2>Enabling the Plugin</h2>
 <p>To enable the plugin run this command:</p>
-<pre>lektor plugins add markdown-highlighter
+<pre lang="shell">lektor plugins add markdown-highlighter
 </pre>
 <h2>Configuring the Plugin</h2>
 <p>The plugin has a config file that is used to configure a few things
 for Pygments.  Just create a file named <code>markdown-highlighter.ini</code> into your
 <code>configs/</code> folder.  Currently only <code>pygments.style</code> is used:</p>
-<pre><span class="k">[pygments]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[pygments]</span><span class="w"></span>
 <span class="na">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">tango</span><span class="w"></span>
 </pre>
 <p>You can use this to select any of the built-in Pygments styles.  Support for
@@ -163,11 +163,11 @@ print(&quot;Hello World!&quot;)
 <h2>In Templates</h2>
 <p>In templates the plugin provides the <code>get_pygments_stylesheet</code> function which
 can be used to generate and retrieve a link to the pygments stylesheet:</p>
-<pre><span class="x">&lt;link rel=&quot;stylesheet&quot; href=&quot;</span><span class="cp">{{</span> <span class="nv">get_pygments_stylesheet</span><span class="o">()|</span><span class="nf">url</span> <span class="cp">}}</span><span class="x">&quot;&gt;</span>
+<pre lang="jinja"><span class="x">&lt;link rel=&quot;stylesheet&quot; href=&quot;</span><span class="cp">{{</span> <span class="nv">get_pygments_stylesheet</span><span class="o">()|</span><span class="nf">url</span> <span class="cp">}}</span><span class="x">&quot;&gt;</span>
 </pre>
 <p>In addition the <code>|pygmentize</code> filter can be used to highlight code from
 templates.  It takes one argument which is the lexer name:</p>
-<pre><span class="cp">{{</span> <span class="s1">&#39;print &quot;Hello World!&quot;&#39;</span><span class="o">|</span><span class="nf">pygmentize</span><span class="o">(</span><span class="s1">&#39;python&#39;</span><span class="o">)</span> <span class="cp">}}</span><span class="x"></span>
+<pre lang="jinja"><span class="cp">{{</span> <span class="s1">&#39;print &quot;Hello World!&quot;&#39;</span><span class="o">|</span><span class="nf">pygmentize</span><span class="o">(</span><span class="s1">&#39;python&#39;</span><span class="o">)</span> <span class="cp">}}</span><span class="x"></span>
 </pre>
  
         
diff --git a/plugins/lektor-netlify/index.html b/plugins/lektor-netlify/index.html
index 9e2ba35e..fbdae1d4 100644
--- a/plugins/lektor-netlify/index.html
+++ b/plugins/lektor-netlify/index.html
@@ -132,12 +132,12 @@
 <h2>Installation</h2>
 <p>Install the <code>netlify</code> command-line program according to <a href="https://www.netlify.com/docs/cli" rel="nofollow">the instructions on netlify.com</a>.</p>
 <p>Add lektor-netlify to your project from the command line:</p>
-<pre>lektor plugins add lektor-netlify
+<pre lang="shell">lektor plugins add lektor-netlify
 </pre>
 <p>See <a href="https://www.getlektor.com/docs/plugins/" rel="nofollow">the Lektor documentation for more instructions on installing plugins</a>.</p>
 <h2>Configuration</h2>
 <p>Configure a server in your <code>.lektorproject</code> file:</p>
-<pre><span class="k">[servers.production]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[servers.production]</span><span class="w"></span>
 <span class="na">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">Production</span><span class="w"></span>
 <span class="na">target</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">netlify://my-domain.com</span><span class="w"></span>
 </pre>
@@ -147,16 +147,16 @@
 <li><a href="https://app.netlify.com/applications" rel="nofollow">Applications</a></li>
 </ul>
 <p>You must use this access token each time you publish. <strong>If your project file is private</strong> you can save the token there. Do not commit this!</p>
-<pre><span class="k">[servers.production]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[servers.production]</span><span class="w"></span>
 <span class="na">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">Production</span><span class="w"></span>
 <span class="na">target</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">netlify://my-domain.com</span><span class="w"></span>
 <span class="na">key</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">ACCESS_TOKEN</span><span class="w"></span>
 </pre>
 <p>Now deploy your site like:</p>
-<pre>lektor deploy production
+<pre lang="shell">lektor deploy production
 </pre>
 <p>Otherwise, pass the token on the command line:</p>
-<pre>lektor deploy production --key ACCESS_TOKEN    
+<pre lang="shell">lektor deploy production --key ACCESS_TOKEN    
 </pre>
  
         
diff --git a/plugins/lektor-npm-support/index.html b/plugins/lektor-npm-support/index.html
index 5745fa54..fa7b48bd 100644
--- a/plugins/lektor-npm-support/index.html
+++ b/plugins/lektor-npm-support/index.html
@@ -158,13 +158,13 @@
 <p><code>lektor-npm-support</code> makes it easy to use <a href="https://parcel.js.org" rel="nofollow">Parcel</a>, <a href="https://webpack.js.org" rel="nofollow">webpack</a>, <a href="http://browserify.org/" rel="nofollow">browserify</a>, or any other tool to build assets for <a href="https://github.com/lektor/lektor" rel="nofollow">Lektor</a> projects.</p>
 <h2>Enabling the Plugin</h2>
 <p>To enable the plugin, run this command while inside your Lektor project directory:</p>
-<pre>lektor plugins add lektor-npm-support
+<pre lang="bash">lektor plugins add lektor-npm-support
 </pre>
 <h2>Example: Creating a <a href="https://parceljs.org/" rel="nofollow">Parcel</a> Project</h2>
 <p>Create a <code>parcel/</code> folder and inside that folder create the following files:</p>
 <h3><code>configs/npm-support.ini</code></h3>
 <p>This file instructs the plugin how to generate the assets:</p>
-<pre><span class="k">[parcel]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[parcel]</span><span class="w"></span>
 <span class="na">npm</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">yarn</span><span class="w"></span>
 <span class="na">watch_script</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">watch</span><span class="w"></span>
 <span class="na">build_script</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">build</span><span class="w"></span>
@@ -178,7 +178,7 @@
 <p>This plugin supports more than one such entry.</p>
 <h3><code>parcel/package.json</code></h3>
 <p>This is a standard <code>package.json</code> file. It should contain two entries in the <code>scripts</code> section. The <code>build</code> script is used during <code>lektor build -f npm</code>, and the <code>watch</code> script is used during <code>lektor server -f npm</code>.</p>
-<pre><span class="p">{</span><span class="w"></span>
+<pre lang="json"><span class="p">{</span><span class="w"></span>
 <span class="w">  </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;my-parcel-project&quot;</span><span class="p">,</span><span class="w"></span>
 <span class="w">  </span><span class="nt">&quot;version&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;1.0.0&quot;</span><span class="p">,</span><span class="w"></span>
 <span class="w">  </span><span class="nt">&quot;scripts&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
@@ -194,19 +194,19 @@ $ yarn add parcel-bundler babel-preset-env node-sass
 </code></pre>
 <h3><code>parcel/babelr.rc</code></h3>
 <p>Next up is a simple Babel config file, using the recommended <code>env</code> preset.</p>
-<pre><span class="p">{</span><span class="w"></span>
+<pre lang="json"><span class="p">{</span><span class="w"></span>
 <span class="w">  </span><span class="nt">&quot;presets&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;env&quot;</span><span class="p">]</span><span class="w"></span>
 <span class="p">}</span><span class="w"></span>
 </pre>
 <h3><code>parcel/main.scss</code></h3>
 <p>A simple SCSS file.</p>
-<pre><span class="nt">body</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
+<pre lang="scss"><span class="nt">body</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
 <span class="w">  </span><span class="nt">border</span><span class="nd">:</span><span class="w"> </span><span class="nt">10px</span><span class="w"> </span><span class="nt">solid</span><span class="w"> </span><span class="nt">red</span><span class="o">;</span><span class="w"></span>
 <span class="p">}</span><span class="w"></span>
 </pre>
 <h3><code>parcel/main.js</code></h3>
 <p>A simple Javascript file that imports the SCSS file so that Parcel will know to include it as well.</p>
-<pre><span class="k">import</span><span class="w"> </span><span class="s1">&#39;./main.scss&#39;</span><span class="p">;</span><span class="w"></span>
+<pre lang="javascript"><span class="k">import</span><span class="w"> </span><span class="s1">&#39;./main.scss&#39;</span><span class="p">;</span><span class="w"></span>
 </pre>
 <h2>Running the Server</h2>
 <p>Now you're ready to go.  When you run <code>lektor server</code> nothing wil happen,
@@ -220,7 +220,7 @@ Lektor website that use this plugin.</p>
 <p>To manually trigger a build that also invokes webpack you can use <code>lektor build -f npm</code>.</p>
 <h2>Including The Files</h2>
 <p>Now you need to include the files in your template.  This will do it:</p>
-<pre><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;{{ &#39;/static/gen/main.css&#39;| asseturl }}&quot;</span><span class="p">&gt;</span>
+<pre lang="html"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;{{ &#39;/static/gen/main.css&#39;| asseturl }}&quot;</span><span class="p">&gt;</span>
 <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">text/javascript</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;{{ &#39;/static/gen/main.js&#39;| asseturl }}&quot;</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
 </pre>
 <h2>Complete Working Example</h2>
diff --git a/plugins/lektor-polymorphic-type/index.html b/plugins/lektor-polymorphic-type/index.html
index d34bf51a..9d3224f6 100644
--- a/plugins/lektor-polymorphic-type/index.html
+++ b/plugins/lektor-polymorphic-type/index.html
@@ -150,7 +150,7 @@ with “<code>_type</code>” appended.</p>
 <h2>Examples</h2>
 <h3>Simple Example</h3>
 <p>Here is an example model file for a simple page, with a selectable body format:</p>
-<pre><span class="c1"># page.ini</span><span class="w"></span>
+<pre lang="ini"><span class="c1"># page.ini</span><span class="w"></span>
 
 <span class="k">[model]</span><span class="w"></span>
 <span class="na">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">Page</span><span class="w"></span>
@@ -175,7 +175,7 @@ determine whether the <code>body</code> field is interpreted as being <code>mark
 <code>html</code> or <code>text</code>.</p>
 <h3>Contrived Example</h3>
 <p>Here is a contrived example showing the use of the <code>polymorphic_type</code> option:</p>
-<pre><span class="c1"># page.ini</span><span class="w"></span>
+<pre lang="ini"><span class="c1"># page.ini</span><span class="w"></span>
 
 <span class="k">[model]</span><span class="w"></span>
 <span class="na">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">Page</span><span class="w"></span>
diff --git a/plugins/lektor-qiniu/index.html b/plugins/lektor-qiniu/index.html
index 543122f3..c02a08db 100644
--- a/plugins/lektor-qiniu/index.html
+++ b/plugins/lektor-qiniu/index.html
@@ -143,28 +143,28 @@
 <p><strong>This plugin does not do anything to help you create or configure qiniu account or bucket.</strong>  You will have to make it done by yourself.</p>
 <h2>Installation</h2>
 <p>There ways to install plugin in Lektor, the easy ways is run below command in your project.</p>
-<pre><span class="go">lektor plugins add lektor-qiniu</span>
+<pre lang="console"><span class="go">lektor plugins add lektor-qiniu</span>
 </pre>
 <p>Press Enter and lektor will automatically download and install this plugin for you.</p>
 <h2>Usage</h2>
 <p>After Installation, open your lektorproject file, first it should have a section like this:</p>
-<pre><span class="k">[packages]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[packages]</span><span class="w"></span>
 <span class="na">lektor-qiniu</span><span class="o">=</span><span class="w"> </span><span class="s">0.1.3</span><span class="w"></span>
 </pre>
 <p>then below this section, you need add your bucket and folder(optional) as a target of a deploy server, like this:</p>
-<pre><span class="k">[servers.qiniu]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[servers.qiniu]</span><span class="w"></span>
 <span class="na">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">qiniu</span><span class="w"></span>
 <span class="na">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">yes</span><span class="w"></span>
 <span class="na">target</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">qiniu://&lt;YOUR-BUCKET&gt;</span><span class="w"></span>
 </pre>
 <p>or if you want deploy your site to a folder in a bucket, mostly for backups, you can add server section as below:</p>
-<pre><span class="k">[servers.qiniu]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[servers.qiniu]</span><span class="w"></span>
 <span class="na">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">qiniu</span><span class="w"></span>
 <span class="na">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">yes</span><span class="w"></span>
 <span class="na">target</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">qiniu://&lt;YOUR-BUCKET&gt;/&lt;NAME-OF-FOLDER&gt;</span><span class="w"></span>
 </pre>
 <p>for example, if you want to deploy your site to a bucket name &quot;abcde&quot;, folder &quot;fjhi&quot;, you will need to add a server section as below:</p>
-<pre><span class="k">[servers.qiniu]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[servers.qiniu]</span><span class="w"></span>
 <span class="na">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">qiniu</span><span class="w"></span>
 <span class="na">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">yes</span><span class="w"></span>
 <span class="na">target</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">qiniu://abcde/fjhi</span><span class="w"></span>
@@ -177,7 +177,7 @@
 <p>In configs folder, create a configuration file exactly named <strong>qiniu.ini</strong>.</p>
 <h4>Attention: DO NOT name the configuration file with other names, otherwise this plugin will not work properly.</h4>
 <p>In this configuration file, you will need add few more sections, you can copy a sample configuration ini file from the sample_config folder, it looks like this:</p>
-<pre><span class="k">[auth]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[auth]</span><span class="w"></span>
 <span class="na">Access_Key</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">replace_with_your_own_AK</span><span class="w"></span>
 <span class="na">Secret_Key</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">replace_with_your_won_SK</span><span class="w"></span>
 
@@ -197,7 +197,7 @@
 <h4>exclusions</h4>
 <p>Another function this plugin provides is exclude folders or files you want to upload during deployment.</p>
 <p>To exclude files or folders, just put the name of the folders or files in the <strong>exclusions</strong> section of configuration file, separated each one with commas.</p>
-<pre><span class="k">[exclusions]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[exclusions]</span><span class="w"></span>
 <span class="na">dirs</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">.lektor, dir1, dir2</span><span class="w"></span>
 <span class="na">files</span><span class="w"> </span><span class="o">=</span><span class="w">  </span><span class="s">file1, file2,file3</span><span class="w"></span>
 </pre>
diff --git a/plugins/lektor-s3/index.html b/plugins/lektor-s3/index.html
index bb60a368..9324ba4b 100644
--- a/plugins/lektor-s3/index.html
+++ b/plugins/lektor-s3/index.html
@@ -147,19 +147,19 @@ create the bucket and set its permissions to allow global read access.
 Remember to do this <strong>first</strong> because lektor-s3 won't do it automatically.</p>
 <h2>Installation and Usage</h2>
 <p>Install with the usual Lektor toolchain. Within your project, run</p>
-<pre><span class="go">lektor plugins add lektor-s3</span>
+<pre lang="console"><span class="go">lektor plugins add lektor-s3</span>
 </pre>
 <p>You should see a message saying lektor-s3 has been added to the project.</p>
 <p>Next, add an S3 bucket to your project's servers. In your project file
 (like <code>blog.lektorproject</code>), add the following:</p>
-<pre><span class="k">[servers.s3]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[servers.s3]</span><span class="w"></span>
 <span class="na">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">S3</span><span class="w"></span>
 <span class="na">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">yes</span><span class="w"></span>
 <span class="na">target</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">s3://&lt;YOUR-BUCKET&gt;</span><span class="w"></span>
 </pre>
 <p>For example, if you wanted to deploy to a bucket named 'huntedwumpus',
 you'd make that last line</p>
-<pre><span class="na">target</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">s3://huntedwumpus</span><span class="w"></span>
+<pre lang="ini"><span class="na">target</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">s3://huntedwumpus</span><span class="w"></span>
 </pre>
 <p>Now, if you call <code>lektor deploy s3</code>, Lektor will upload your built
 website to S3 in the bucket you targeted.</p>
@@ -167,7 +167,7 @@ website to S3 in the bucket you targeted.</p>
 <p>Optionally, you can also provide a <a href="https://aws.amazon.com/cloudfront/" rel="nofollow">CloudFront</a>
 distribution ID. If you do, Lektor will invalidate all objects in that CloudFront
 distribution after every deploy.</p>
-<pre><span class="na">cloudfront</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">&lt;YOUR-DISTRIBUTION-ID&gt;</span><span class="w"></span>
+<pre lang="ini"><span class="na">cloudfront</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">&lt;YOUR-DISTRIBUTION-ID&gt;</span><span class="w"></span>
 </pre>
 <h2>Credentials</h2>
 <p>You need to prove to S3 that you have permission to upload to the
@@ -181,7 +181,7 @@ and <code>AWS_SECRET_ACCESS_KEY</code>.</p>
 <p>If you have multiple sets of credentials, you can group them into profiles in
 your credentials file and choose the right one using the <code>AWS_PROFILE</code>
 environment variable. Your <code>~/.aws/credenials</code> file might look like this:</p>
-<pre><span class="k">[work]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[work]</span><span class="w"></span>
 <span class="na">aws_access_key_id</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">&lt;...&gt;</span><span class="w"></span>
 <span class="na">aws_secret_access_key</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">&lt;...&gt;</span><span class="w"></span>
 
@@ -190,7 +190,7 @@ environment variable. Your <code>~/.aws/credenials</code> file might look like t
 <span class="na">aws_secret_access_key</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">&lt;...&gt;</span><span class="w"></span>
 </pre>
 <p>And then you can invoke <code>lektor</code> with the environment variable:</p>
-<pre><span class="gp">$ </span><span class="nv">AWS_PROFILE</span><span class="o">=</span>personal lektor deploy<span class="sb">`</span>
+<pre lang="console"><span class="gp">$ </span><span class="nv">AWS_PROFILE</span><span class="o">=</span>personal lektor deploy<span class="sb">`</span>
 </pre>
 <h2>Configuration</h2>
 <p>You can specify headers to be attached to particular files when uploading them
@@ -208,7 +208,7 @@ their values. A list of valid headers is defined in the boto documentation as
 <a href="https://boto3.readthedocs.io/en/latest/reference/customizations/s3.html#boto3.s3.transfer.S3Transfer.ALLOWED_UPLOAD_ARGS" rel="nofollow"><code>ALLOWED_UPLOAD_ARGS</code></a>.</p>
 <p>Defaults can be defined via the usual INI file way, in a <code>[DEFAULTS]</code> section.</p>
 <p>For example, your configuration file might look like this:</p>
-<pre><span class="k">[DEFAULT]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[DEFAULT]</span><span class="w"></span>
 <span class="na">CacheControl</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">public,max-age=3600</span><span class="w"></span>
 
 <span class="k">[static files]</span><span class="w"></span>
diff --git a/plugins/lektor-scss/index.html b/plugins/lektor-scss/index.html
index 9b2722c5..65f08ae7 100644
--- a/plugins/lektor-scss/index.html
+++ b/plugins/lektor-scss/index.html
@@ -151,16 +151,16 @@
 </ul>
 <h2>Installation</h2>
 <p>You can install the plugin with Lektor's installer:</p>
-<pre>lektor plugins add lektor-scss
+<pre lang="bash">lektor plugins add lektor-scss
 </pre>
 <p>Or by hand, adding the plugin to the packages section in your lektorproject file:</p>
-<pre><span class="k">[packages]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[packages]</span><span class="w"></span>
 <span class="na">lektor-scss</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">1.4.1</span><span class="w"></span>
 </pre>
 <h2>Usage</h2>
 <p>To enable the plugin, pass the <code>scss</code> flag when starting the development
 server or when running a build:</p>
-<pre><span class="c1"># build and compile css from scss</span>
+<pre lang="bash"><span class="c1"># build and compile css from scss</span>
 lektor build -f scss
 
 <span class="c1"># edit site with new generated css</span>
@@ -169,7 +169,7 @@ lektor server -f scss
 <h2>Python3</h2>
 <p>It is highly recommended to use this plugin with a python3 version of lektor.</p>
 <p>Since lektor can be used as a python module it is possible to enforce this <em>(after lektor is installed eg. with <code>pip3 install --user --upgrade lektor</code>)</em> with the following command:</p>
-<pre><span class="c1"># run a python3 lektor server with new generated css</span>
+<pre lang="bash"><span class="c1"># run a python3 lektor server with new generated css</span>
 python3 -m lektor server -f scss
 </pre>
 <h2>Configuration</h2>
diff --git a/plugins/lektor-scsscompile/index.html b/plugins/lektor-scsscompile/index.html
index 1d80bcde..132d3759 100644
--- a/plugins/lektor-scsscompile/index.html
+++ b/plugins/lektor-scsscompile/index.html
@@ -146,19 +146,19 @@
 compiling them as part of the build process. It only rebuilds when it's needed (file changed, a file it imports changed or the config changed). When starting the the development server it watchs the files for changes in the background and rebuilds them when needed.</p>
 <h2>Installing</h2>
 <p>You can install the plugin with Lektor's installer::</p>
-<pre>lektor plugins add lektor-scsscompile
+<pre lang="bash">lektor plugins add lektor-scsscompile
 </pre>
 <p>Or by hand, adding the plugin to the packages section in your lektorproject file::</p>
-<pre><span class="o">[</span>packages<span class="o">]</span>
+<pre lang="bash"><span class="o">[</span>packages<span class="o">]</span>
 lektor-scsscompile <span class="o">=</span> <span class="m">1</span>.3.0
 </pre>
 <h2>Usage</h2>
 <h5></h5>
 <p>To enable scsscompile, pass the <code>scsscompile</code> flag when starting the development
 server or when running a build::</p>
-<pre>lektor build -f scsscompile
+<pre lang="bash">lektor build -f scsscompile
 </pre>
-<pre>lektor build -f scsscompile
+<pre lang="bash">lektor build -f scsscompile
 </pre>
 <p>The Plugin has the following settings you can adjust to your needs:</p>
 <table>
diff --git a/plugins/lektor-strip-html-tags/index.html b/plugins/lektor-strip-html-tags/index.html
index 36980c3b..b9ccfd57 100644
--- a/plugins/lektor-strip-html-tags/index.html
+++ b/plugins/lektor-strip-html-tags/index.html
@@ -131,7 +131,7 @@
 <p>This is a simple Lektor plugin that creates a template filter to remove HTML tags from a string. The use it was created for was to do processing on HTML outputted from a Markdown content field. The Markdown is rendered into HTML, and this filter can turn that into simple text, which was then passed to the <a href="https://github.com/terminal-labs/lektor-natural-language" rel="nofollow">lektor-natural-language</a> filters to get keywords, unsullied by things like <code>&lt;div&gt;</code> tags.</p>
 <p>Example usage:</p>
 <p><code>{{ this.body|striphtmltags }}</code></p>
-<pre><span class="cp">{%</span> <span class="k">set</span> <span class="nv">var</span> <span class="o">=</span> <span class="s1">&#39;&lt;p&gt;&lt;strong&gt;Hello&lt;/strong&gt;World!&lt;/p&gt;&#39;</span> <span class="cp">%}</span><span class="x"></span>
+<pre lang="jinja"><span class="cp">{%</span> <span class="k">set</span> <span class="nv">var</span> <span class="o">=</span> <span class="s1">&#39;&lt;p&gt;&lt;strong&gt;Hello&lt;/strong&gt;World!&lt;/p&gt;&#39;</span> <span class="cp">%}</span><span class="x"></span>
 <span class="cp">{{</span> <span class="nv">var</span><span class="o">|</span><span class="nf">striphtmltags</span> <span class="cp">}}</span><span class="x"></span>
 </pre>
 <p>The last example will render as &quot;Hello World!&quot;</p>
diff --git a/plugins/lektor-surge/index.html b/plugins/lektor-surge/index.html
index 350feb1e..d1b8d0e4 100644
--- a/plugins/lektor-surge/index.html
+++ b/plugins/lektor-surge/index.html
@@ -136,11 +136,11 @@
 <p>See <a href="https://www.getlektor.com/docs/plugins/" rel="nofollow">the Lektor documentation for more instructions on installing plugins</a>.</p>
 <h2>Configuration</h2>
 <p>Configure Surge in your <code>.lektorproject</code> file:</p>
-<pre><span class="k">[servers.surge]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[servers.surge]</span><span class="w"></span>
 <span class="na">target</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">surge:my-domain.com</span><span class="w"></span>
 </pre>
 <p>To force all traffic to HTTPS, update your <code>.lektorproject</code> file:</p>
-<pre><span class="k">[servers.surge]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[servers.surge]</span><span class="w"></span>
 <span class="na">target</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">surge+https:my-domain.com</span><span class="w"></span>
 </pre>
 <p>For more information, see the <a href="https://surge.sh/help/using-https-by-default" rel="nofollow">Surge guide to HTTPS</a>.</p>
diff --git a/plugins/lektor-tags/index.html b/plugins/lektor-tags/index.html
index cfbb5a04..537ed952 100644
--- a/plugins/lektor-tags/index.html
+++ b/plugins/lektor-tags/index.html
@@ -151,19 +151,19 @@ tea
 <p>Each page can list all the posts with that tag.</p>
 <h2>Installation</h2>
 <p>Add lektor-tags to your project from command line:</p>
-<pre>lektor plugins add lektor-tags
+<pre lang="shell">lektor plugins add lektor-tags
 </pre>
 <p>See <a href="https://www.getlektor.com/docs/plugins/" rel="nofollow">the Lektor documentation for more instructions on installing plugins</a>.</p>
 <h2>Overview</h2>
 <p>Say you have a &quot;blog-post&quot; model like this:</p>
-<pre><span class="k">[model]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[model]</span><span class="w"></span>
 <span class="na">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">Blog Post</span><span class="w"></span>
 
 <span class="k">[fields.tags]</span><span class="w"></span>
 <span class="na">type</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">strings</span><span class="w"></span>
 </pre>
 <p>Make a <code>blog-post.html</code> template that includes:</p>
-<pre>{% if this.tags %}
+<pre lang="html">{% if this.tags %}
   <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
     {% for t in this.tags -%}
       <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
@@ -176,7 +176,7 @@ tea
 {% endif %}
 </pre>
 <p>This expression in the template generates a <em>source path</em> for each of the blog post's tags:</p>
-<pre><span class="x">&#39;/blog@tag/&#39; ~ t</span>
+<pre lang="jinja"><span class="x">&#39;/blog@tag/&#39; ~ t</span>
 </pre>
 <p>Then if the tag is &quot;my-tag&quot;, the expression renders a source path like:</p>
 <pre><code>/blog/tag/my-tag
@@ -189,37 +189,37 @@ tea
 <p>Set these options in <code>configs/tags.ini</code>:</p>
 <h3><code>parent</code></h3>
 <p>Required. The source path of the tag pages' parent page. For example:</p>
-<pre><span class="na">parent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">/blog</span><span class="w"></span>
+<pre lang="ini"><span class="na">parent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">/blog</span><span class="w"></span>
 </pre>
 <p>Then tag pages' source paths are like:</p>
 <pre><code>/blog/tag/my-tag
 </code></pre>
 <p>You can specify the root as the parent:</p>
-<pre><span class="na">parent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">/</span><span class="w"></span>
+<pre lang="ini"><span class="na">parent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">/</span><span class="w"></span>
 </pre>
 <h3><code>items</code></h3>
 <p>A query for all items on the page for one tag. You can use the variables <code>site</code> and <code>tag</code>. The template's <code>this</code> variable has a <code>parent</code> attribute. The default query is:</p>
-<pre><span class="na">items</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">this.parent.children.filter(F.tags.contains(tag))</span><span class="w"></span>
+<pre lang="ini"><span class="na">items</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">this.parent.children.filter(F.tags.contains(tag))</span><span class="w"></span>
 </pre>
 <p>You can sort and filter with any expression:</p>
-<pre><span class="na">items</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">this.parent.children.filter(F.tags.contains(tag) and F.status == &#39;published&#39;).order_by(&#39;-pub_date&#39;)</span><span class="w"></span>
+<pre lang="ini"><span class="na">items</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">this.parent.children.filter(F.tags.contains(tag) and F.status == &#39;published&#39;).order_by(&#39;-pub_date&#39;)</span><span class="w"></span>
 </pre>
 <p>If the parent page has <a href="https://www.getlektor.com/docs/guides/pagination/" rel="nofollow">a pagination query</a> you may want to use it for tagged pages:</p>
-<pre><span class="na">items</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">this.parent.pagination.items.filter(F.tags.contains(tag))</span><span class="w"></span>
+<pre lang="ini"><span class="na">items</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">this.parent.pagination.items.filter(F.tags.contains(tag))</span><span class="w"></span>
 </pre>
 <p>See <a href="https://www.getlektor.com/docs/api/db/query/" rel="nofollow">the Lektor documentation for queries</a>.</p>
 <h3><code>tags_field</code></h3>
 <p>The name of the field in your model that contains tags. Defaults to <code>tags</code>. The field should be of type <code>strings</code>. See <a href="https://www.getlektor.com/docs/api/db/types/strings/" rel="nofollow">the Lektor documentation for the <code>strings</code> type</a>.</p>
 <p>For example, if your model is like:</p>
-<pre><span class="k">[fields.labels]</span><span class="w"></span>
+<pre lang="ini"><span class="k">[fields.labels]</span><span class="w"></span>
 <span class="na">type</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">strings</span><span class="w"></span>
 </pre>
 <p>Then add this to <code>tags.ini</code>:</p>
-<pre><span class="na">tags_field</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">labels</span><span class="w"></span>
+<pre lang="ini"><span class="na">tags_field</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">labels</span><span class="w"></span>
 </pre>
 <h3><code>template</code></h3>
 <p>The template for the page that lists all posts with a certain tag. The template's <code>this</code> variable has attributes <code>tag</code> and <code>items</code>. An example template:</p>
-<pre><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Tag: {{ this.tag }}<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
+<pre lang="html"><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Tag: {{ this.tag }}<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
 <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Items:<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
 <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
   {% for i in this.items %}
@@ -230,39 +230,39 @@ tea
 <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
 </pre>
 <p>Save a file like this to your project's <code>templates/tags.html</code>. If you name the file something different, like <code>label.html</code>, add this line to <code>tags.ini</code>:</p>
-<pre><span class="na">template</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">label.html</span><span class="w"></span>
+<pre lang="ini"><span class="na">template</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">label.html</span><span class="w"></span>
 </pre>
 <p>The plugin provides a default template if you don't specify one.</p>
 <h3><code>url_path</code></h3>
 <p>An expression for the location of each tag page. You can use the variables <code>site</code> and <code>tag</code>. The <code>this</code> variable is a page with attributes <code>parent</code> and <code>items</code>. The default expression is:</p>
-<pre><span class="na">url_path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">{{ this.parent.url_path }}tag/{{ tag }}</span><span class="w"></span>
+<pre lang="ini"><span class="na">url_path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">{{ this.parent.url_path }}tag/{{ tag }}</span><span class="w"></span>
 </pre>
 <p>This expression generates URLs like <code>/blog/tag/coffee</code>.</p>
 <h3><code>ignore_missing</code></h3>
 <p>Default false. To set true, add this line to <code>tags.ini</code>:</p>
-<pre><span class="na">ignore_missing</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">true</span><span class="w"></span>
+<pre lang="ini"><span class="na">ignore_missing</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">true</span><span class="w"></span>
 </pre>
 <p>This allows URLs to missing tag pages to be silently replaced with &quot;&quot;. The example use case is if your <code>blog-post.html</code> template includes a statement like:</p>
-<pre>{% for t in this.tags -%}
+<pre lang="html">{% for t in this.tags -%}
   <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;{{ (&#39;/blog@tag/&#39; ~ t)|url }}&quot;</span><span class="p">&gt;</span>{{ t }}<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
 {% endfor %}
 </pre>
 <p>If a blog post <em>draft</em> is not discoverable, and it has any new tags used by no published blog posts, then those tag pages do not yet exist. Turn on <code>ignore_missing</code> to allow such drafts to be built. The tag-page URL path will be the empty string &quot;&quot;, until the draft is published and the tag page is created.</p>
 <h3><code>tags</code></h3>
 <p>Advanced configuration. An expression for the set of tags. Note that this expression is also useful in a template to get a list of all tags. The default expression is:</p>
-<pre><span class="na">tags</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">parent.children.distinct(&quot;tags&quot;)</span><span class="w"></span>
+<pre lang="ini"><span class="na">tags</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">parent.children.distinct(&quot;tags&quot;)</span><span class="w"></span>
 </pre>
 <p>If you set <code>tags_field</code> to a different field name than &quot;tags&quot;, the default expression uses your custom field name. For example if you have this line in <code>tags.ini</code>:</p>
-<pre><span class="na">tags_field</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">labels</span><span class="w"></span>
+<pre lang="ini"><span class="na">tags_field</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">labels</span><span class="w"></span>
 </pre>
 <p>Then the default value of <code>tags</code> is:</p>
-<pre><span class="na">tags</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">parent.children.distinct(&quot;labels&quot;)</span><span class="w"></span>
+<pre lang="ini"><span class="na">tags</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">parent.children.distinct(&quot;labels&quot;)</span><span class="w"></span>
 </pre>
 <p>You can use any template expression. For example, if your items have a &quot;published&quot; boolean field, you can select tags of published items:</p>
-<pre><span class="na">tags</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">parent.children.filter(F.published).distinct(&quot;tags&quot;)</span><span class="w"></span>
+<pre lang="ini"><span class="na">tags</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">parent.children.filter(F.published).distinct(&quot;tags&quot;)</span><span class="w"></span>
 </pre>
 <p>Or even list your tags manually:</p>
-<pre><span class="na">tags</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">[&quot;tag1&quot;, &quot;tag2&quot;]</span><span class="w"></span>
+<pre lang="ini"><span class="na">tags</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">[&quot;tag1&quot;, &quot;tag2&quot;]</span><span class="w"></span>
 </pre>
 <p>See <a href="https://www.getlektor.com/docs/api/db/query/" rel="nofollow">the Lektor documentation for queries</a>.</p>
 <p>Tags are always deduplicated. Tags are sorted in the order listed in the contents.lr / admin, allowing you to control their order manually. Since <code>{{ tags }}</code> simply returns a list, you can always apply any Jinja2 filter on that list such as sort, slice, or rejectattr.</p>
@@ -279,7 +279,7 @@ tea
 <h3><code>count</code> — Number of pages tagged with this tag</h3>
 <p>This is the basic weight, used as a base for the following tags.</p>
 <h4>Example: Tags (with tag count) sorted by tag count (most used first)</h4>
-<pre><span class="x">&lt;ul&gt;</span>
+<pre lang="jinja"><span class="x">&lt;ul&gt;</span>
 <span class="cp">{%</span> <span class="k">for</span> <span class="nv">tag</span><span class="o">,</span> <span class="nv">weight</span> <span class="k">in</span> <span class="o">(</span><span class="nv">tagweights</span><span class="o">()</span> <span class="o">|</span> <span class="nf">dictsort</span><span class="o">(</span><span class="nv">by</span><span class="o">=</span><span class="s1">&#39;value&#39;</span><span class="o">,</span> <span class="nv">reverse</span><span class="o">=</span><span class="kp">true</span><span class="o">))</span> <span class="cp">%}</span><span class="x"></span>
 <span class="x">    &lt;li&gt;</span><span class="cp">{{</span> <span class="nv">tag</span> <span class="cp">}}</span><span class="x"> (</span><span class="cp">{{</span> <span class="nv">weight.count</span> <span class="cp">}}</span><span class="x"> articles).&lt;/li&gt;</span>
 <span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span><span class="x"></span>
@@ -295,7 +295,7 @@ tea
 <p>Mapping is done using a linear function over the logarithm of tag counts.</p>
 <p>The result is a float: you might want to convert them to integers first (see example).</p>
 <h4>Example: Most used tag is twice as big as least used tag</h4>
-<pre><span class="cp">{%</span> <span class="k">for</span> <span class="nv">tag</span><span class="o">,</span> <span class="nv">weight</span> <span class="k">in</span> <span class="nv">tagweights</span><span class="o">()|</span><span class="nf">dictsort</span> <span class="cp">%}</span><span class="x"></span>
+<pre lang="jinja"><span class="cp">{%</span> <span class="k">for</span> <span class="nv">tag</span><span class="o">,</span> <span class="nv">weight</span> <span class="k">in</span> <span class="nv">tagweights</span><span class="o">()|</span><span class="nf">dictsort</span> <span class="cp">%}</span><span class="x"></span>
 <span class="x">&lt;a</span>
 <span class="x">    href=&quot;</span><span class="cp">{{</span> <span class="o">(</span><span class="s1">&#39;/blog@tag/&#39;</span> <span class="o">~</span> <span class="nv">tag</span><span class="o">)|</span><span class="nf">url</span> <span class="cp">}}</span><span class="x">&quot;</span>
 <span class="x">    style=&quot;font-size: </span><span class="cp">{{</span> <span class="nv">weight.log</span><span class="o">(</span><span class="m">100</span><span class="o">,</span> <span class="m">200</span><span class="o">)|</span><span class="nf">round</span><span class="o">|</span><span class="nf">int</span> <span class="cp">}}</span><span class="x">%;&quot;</span>
@@ -312,7 +312,7 @@ tea
 <p>The less used tag is mapped with the first item, the most used tag is mapped with the last item.</p>
 <p>Mapping is done using a linear function over the logarithm of tag counts.</p>
 <h4>Example: Tags are given CSS classes <code>tagcloud-tiny</code>, <code>tagcloud-small</code>, etc.</h4>
-<pre><span class="cp">{%</span> <span class="k">for</span> <span class="nv">tag</span><span class="o">,</span> <span class="nv">weight</span> <span class="k">in</span> <span class="nv">tagweights</span><span class="o">()|</span><span class="nf">dictsort</span> <span class="cp">%}</span><span class="x"></span>
+<pre lang="jinja"><span class="cp">{%</span> <span class="k">for</span> <span class="nv">tag</span><span class="o">,</span> <span class="nv">weight</span> <span class="k">in</span> <span class="nv">tagweights</span><span class="o">()|</span><span class="nf">dictsort</span> <span class="cp">%}</span><span class="x"></span>
 <span class="x">&lt;a</span>
 <span class="x">    href=&quot;</span><span class="cp">{{</span> <span class="o">(</span><span class="s1">&#39;/blog@tag/&#39;</span> <span class="o">~</span> <span class="nv">tag</span><span class="o">)|</span><span class="nf">url</span> <span class="cp">}}</span><span class="x">&quot;</span>
 <span class="x">    class=&quot;tagcloud-</span><span class="cp">{{</span> <span class="nv">weight.loggroup</span><span class="o">([</span><span class="s2">&quot;tiny&quot;</span><span class="o">,</span> <span class="s2">&quot;small&quot;</span><span class="o">,</span> <span class="s2">&quot;normal&quot;</span><span class="o">,</span> <span class="s2">&quot;big&quot;</span><span class="o">,</span> <span class="s2">&quot;large&quot;</span><span class="o">])</span> <span class="cp">}}</span><span class="x">&quot;</span>
diff --git a/plugins/lektor-tailwind/index.html b/plugins/lektor-tailwind/index.html
index 2422925a..87ef19fd 100644
--- a/plugins/lektor-tailwind/index.html
+++ b/plugins/lektor-tailwind/index.html
@@ -136,14 +136,14 @@
 <ol>
 <li>
 <p>Add plugin to your project</p>
-<pre>$ lektor plugin add lektor-tailwind
+<pre lang="bash">$ lektor plugin add lektor-tailwind
 $ lektor plugin list
 </pre>
 </li>
 <li>
 <p>Configure your template paths</p>
 <p>In <code>tailwindcss.config.js</code>:</p>
-<pre><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
+<pre lang="javascript"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
 <span class="w">  </span><span class="nx">content</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;./templates/**/*.{html,j2}&#39;</span><span class="p">],</span><span class="w"></span>
 <span class="w">  </span><span class="nx">theme</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
 <span class="w">    </span><span class="nx">extend</span><span class="o">:</span><span class="w"> </span><span class="p">{},</span><span class="w"></span>
@@ -155,14 +155,14 @@ $ lektor plugin list
 <li>
 <p>Add the Tailwind directives to your CSS</p>
 <p>In <code>assets/static/style.css</code>:</p>
-<pre><span class="p">@</span><span class="k">tailwind</span><span class="w"> </span><span class="nt">base</span><span class="p">;</span><span class="w"></span>
+<pre lang="css"><span class="p">@</span><span class="k">tailwind</span><span class="w"> </span><span class="nt">base</span><span class="p">;</span><span class="w"></span>
 <span class="p">@</span><span class="k">tailwind</span><span class="w"> </span><span class="nt">components</span><span class="p">;</span><span class="w"></span>
 <span class="p">@</span><span class="k">tailwind</span><span class="w"> </span><span class="nt">utilities</span><span class="p">;</span><span class="w"></span>
 </pre>
 </li>
 <li>
 <p>Start lektor build or server:</p>
-<pre>$ lektor build
+<pre lang="bash">$ lektor build
 $ lektor server
 </pre>
 </li>
diff --git a/plugins/lektor-webpack-html-helper/index.html b/plugins/lektor-webpack-html-helper/index.html
index 6e9ba3fe..ea4bb4d9 100644
--- a/plugins/lektor-webpack-html-helper/index.html
+++ b/plugins/lektor-webpack-html-helper/index.html
@@ -138,7 +138,7 @@
 These files will then be copied over to Lektors templates folder so that they can be used by Lektor.
 This plugin depends on the <a href="https://github.com/lektor/lektor-webpack-support" rel="nofollow">lektor-webpack-support</a> plugin to be really useful.</p>
 <h1>webpack/webpack.config.js</h1>
-<pre><span class="kd">const</span><span class="w"> </span><span class="nx">path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;path&quot;</span><span class="p">);</span><span class="w"></span>
+<pre lang="js"><span class="kd">const</span><span class="w"> </span><span class="nx">path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;path&quot;</span><span class="p">);</span><span class="w"></span>
 <span class="kd">const</span><span class="w"> </span><span class="nx">MiniCssExtractPlugin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;mini-css-extract-plugin&quot;</span><span class="p">);</span><span class="w"></span>
 <span class="kd">const</span><span class="w"> </span><span class="nx">HtmlWebpackPlugin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;html-webpack-plugin&quot;</span><span class="p">);</span><span class="w"></span>
 <span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">CleanWebpackPlugin</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;clean-webpack-plugin&quot;</span><span class="p">);</span><span class="w"></span>
@@ -181,7 +181,7 @@ This plugin depends on the <a href="https://github.com/lektor/lektor-webpack-sup
 <span class="p">}</span><span class="w"></span>
 </pre>
 <h1>webpack/src/layout_template.html</h1>
-<pre><span class="cp">&lt;!DOCTYPE html&gt;</span>
+<pre lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
 <span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
 
 <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
diff --git a/plugins/lektor-webpack-support/index.html b/plugins/lektor-webpack-support/index.html
index 8bc60b1c..f6dfa390 100644
--- a/plugins/lektor-webpack-support/index.html
+++ b/plugins/lektor-webpack-support/index.html
@@ -153,7 +153,7 @@ the <code>-f webpack</code> flag.</p>
 <h2>Enabling the Plugin</h2>
 <p>To enable the plugin add this to your project file, run this command while
 sitting in your Lektor project directory:</p>
-<pre>lektor plugins add lektor-webpack-support
+<pre lang="bash">lektor plugins add lektor-webpack-support
 </pre>
 <h2>Creating a Webpack Project</h2>
 <p>Next you need to create a webpack project. Create a <code>webpack/</code> folder and
@@ -162,7 +162,7 @@ inside that folder create <code>package.json</code> and a <code>webpack.config.j
 <p>This file instructs <code>npm</code> which packages we will need. All we need for a
 start is to create an almost empty file (name and version fields are mandatory
 but not important for functionality, change them to suit your own needs):</p>
-<pre><span class="p">{</span><span class="w"></span>
+<pre lang="json"><span class="p">{</span><span class="w"></span>
 <span class="w">  </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;lektor-webpack&quot;</span><span class="p">,</span><span class="w"></span>
 <span class="w">  </span><span class="nt">&quot;version&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;1.0.0&quot;</span><span class="p">,</span><span class="w"></span>
 <span class="w">  </span><span class="nt">&quot;private&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"></span>
@@ -182,7 +182,7 @@ setup that's good enough to cover most things you will encounter. The
 idea is to build the files from <code>webpack/scss</code> and <code>webpack/js</code> into
 <code>assets/static/gen</code> so that we can use it even if we do not have webpack
 installed for as long as someone else ran it before.</p>
-<pre><span class="kd">const</span><span class="w"> </span><span class="nx">path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;path&quot;</span><span class="p">);</span><span class="w"></span>
+<pre lang="javascript"><span class="kd">const</span><span class="w"> </span><span class="nx">path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;path&quot;</span><span class="p">);</span><span class="w"></span>
 <span class="kd">const</span><span class="w"> </span><span class="nx">MiniCssExtractPlugin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">&quot;mini-css-extract-plugin&quot;</span><span class="p">);</span><span class="w"></span>
 
 <span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
@@ -238,7 +238,7 @@ Lektor website that uses webpack.</p>
 <code>lektor build -f webpack</code>.</p>
 <h2>Including The Files</h2>
 <p>Now you need to include the files in your template. This will do it:</p>
-<pre><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;{{ &#39;/static/gen/styles.css&#39;|asseturl }}&quot;</span><span class="p">&gt;</span>
+<pre lang="html"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;{{ &#39;/static/gen/styles.css&#39;|asseturl }}&quot;</span><span class="p">&gt;</span>
 <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">text/javascript</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;{{ &#39;/static/gen/app.js&#39;|asseturl }}&quot;</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
 </pre>
  
diff --git a/plugins/lektor-yandex-metrica/index.html b/plugins/lektor-yandex-metrica/index.html
index 40e2f8e1..7590c096 100644
--- a/plugins/lektor-yandex-metrica/index.html
+++ b/plugins/lektor-yandex-metrica/index.html
@@ -132,18 +132,18 @@
         
           <p>This plugin adds support for <a href="https://metrica.yandex.com" rel="nofollow">Yandex Metrica</a>
 to <a href="https://www.getlektor.com" rel="nofollow">Lektor CMS</a></p>
-<div id="enabling-the-plugin">
+<div class="section" id="enabling-the-plugin">
 <h2>Enabling the Plugin</h2>
 <pre>lektor plugins add lektor-yandex-metrica
 </pre>
 </div>
-<div id="configuring-the-plugin">
+<div class="section" id="configuring-the-plugin">
 <h2>Configuring the Plugin</h2>
 <p>Just create a file named <code>yandex-metrica.ini</code> in your <code>configs/</code> folder and configure <code>id</code> key with the provided counter id:</p>
 <pre><span class="na">id</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">YOUR_COUNTER_ID</span>
 </pre>
 </div>
-<div id="in-templates">
+<div class="section" id="in-templates">
 <h2>In Templates</h2>
 <p>Now you can add a Yandex Metrica counter to any of your templates by just using the <code>generate_yandex_metrica</code> function in its tag as below.</p>
 <pre>{{ generate_yandex_metrica() }}