Merge pull request #22 from zakame/highlightjs

Replace prettify.js with highlight.js
mojolicious · Nov 6, 2020 · 3cec09d · 3cec09d
2 parents 045e2e5 + 9605ae4
commit 3cec09d
Show file tree

Hide file tree

Showing 7 changed files with 623 additions and 73 deletions.
diff --git a/lib/Mojolicious/Plugin/MojoDocs.pm b/lib/Mojolicious/Plugin/MojoDocs.pm
@@ -31,11 +31,10 @@ sub _html {
 
   # Rewrite code blocks for syntax highlighting and correct indentation
   for my $e ($dom->find('pre > code')->each) {
-    next if (my $str = $e->content) =~ /^\s*(?:\$|Usage:)\s+/m;
-    next unless $str =~ /[\$\@\%]\w|-&gt;\w|^use\s+\w/m;
-    my $attrs = $e->attr;
-    my $class = $attrs->{class};
-    $attrs->{class} = defined $class ? "$class prettyprint" : 'prettyprint';
+    next if $e->content !~ /^\s*(?:\$|Usage:)\s+/m
+      and $e->content =~ /[\$\@\%]\w|-&gt;\w|^use\s+\w|^#|^&lt;|^\[/m;
+    my $class = $e->attr->{class};
+    $e->attr->{class} = defined $class ? "$class nohighlight" : 'nohighlight';
   }
 
   # Rewrite headers

diff --git a/public/mojolicious/highlight.js/highlight-mojo-light.css b/public/mojolicious/highlight.js/highlight-mojo-light.css
@@ -0,0 +1,56 @@
+.hljs {
+  display: block;
+  overflow-x: auto;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-section,
+.hljs-link {
+    color:#0184bc;
+}
+
+.hljs,
+.hljs-subst {
+    color:#383a42;
+}
+
+.hljs-string,
+.hljs-title,
+.hljs-name,
+.hljs-type,
+.hljs-attribute,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+    color: #50a14f;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion,
+.hljs-meta {
+    color:#a0a1a7;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-title,
+.hljs-section,
+.hljs-doctag,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+  color:#a626a4;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/public/mojolicious/highlight.js/highlight.min.js b/public/mojolicious/highlight.js/highlight.min.js
diff --git a/public/mojolicious/prettify-mojo-light.css b/public/mojolicious/prettify-mojo-light.css
diff --git a/public/mojolicious/prettify/run_prettify.js b/public/mojolicious/prettify/run_prettify.js
diff --git a/templates/layouts/mojolicious.html.ep b/templates/layouts/mojolicious.html.ep
@@ -8,8 +8,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title><%= title || 'Mojolicious - Perl real-time web framework' %></title>
     %= javascript '/mojolicious/jquery/jquery.js'
-    %= javascript '/mojolicious/prettify/run_prettify.js'
-    %= stylesheet '/mojolicious/prettify-mojo-light.css'
+    %= javascript '/mojolicious/highlight.js/highlight.min.js'
+    %= stylesheet '/mojolicious/highlight.js/highlight-mojo-light.css'
+    <script>hljs.initHighlightingOnLoad();</script>
     %= javascript '/mojolicious/bootstrap/bootstrap.js'
     %= stylesheet '/mojolicious/bootstrap/bootstrap.css'
     %= stylesheet '/mojolicious/fontawesome/fontawesome.css'

diff --git a/templates/mojolicious/index.html.ep b/templates/mojolicious/index.html.ep
@@ -101,7 +101,7 @@
         <div class="mojo-start">
           <h2>Getting Started</h2>
           <p>These three lines are a whole web application.</p>
-          <pre><code class="prettyprint">use Mojolicious::Lite;
+          <pre><code>use Mojolicious::Lite;
 
 get &#39;/&#39; =&gt; {text =&gt; &#39;I ♥ Mojolicious!&#39;};
 
@@ -125,7 +125,7 @@ I ♥ Mojolicious!</code></pre>
             <a href="https://docs.mojolicious.org/Mojolicious/Guides/Growing#Differences">grow</a> them easily into
             well-structured <b>Model-View-Controller</b> web applications.
           </p>
-          <pre><code class="prettyprint">use Mojolicious::Lite -signatures;
+          <pre><code>use Mojolicious::Lite -signatures;
 
 # Render template &quot;index.html.ep&quot; from the DATA section
 get &#39;/&#39; =&gt; sub ($c) {