Feature/Code Highlight (#849)

* Feature/Code Highlight

Display code in tutorial using Highlight.js

* Apply fixes from StyleCI

* add lang selection

* fix

Author: ibelar

demos/index.php

@@ -17,7 +17,7 @@
     $t->addParagraph('In this version of Agile Toolkit we introduce "User Actions"!');
 
     $app->add(['Button', 'Learn about User Actions', 'huge basic primary fluid', 'iconRight' => 'right arrow'])
-        ->link(['actions', 'layout' => 'Centered', 'begin' => true]);
+        ->link(['tutorial_actions', 'layout' => 'Centered', 'begin' => true]);
 
     exit;
 }

demos/init.php

@@ -13,6 +13,8 @@ class Demo extends \atk4\ui\Columns
 {
     public $left;
     public $right;
+    public static $isInitialized = false;
+    public $highlightDefaultStyle = 'dark';
 
     public function init()
     {
@@ -23,13 +25,24 @@ public function init()
         $this->right = $this->addColumn();
     }
 
-    public function setCode($code)
+    public function setCode($code, $lang = 'php')
     {
-        $this->left->add(['element'=>'pre'])->set($code);
+        $this->highLightCode();
+        $this->left->add(['element'=>'pre'])->add(['element' => 'code'])->addClass($lang)->set($code);
         $app = $this->right;
         $app->db = $this->app->db;
         eval($code);
     }
+
+    public function highLightCode()
+    {
+        if (!self::$isInitialized) {
+            $this->app->requireCSS('//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/'.$this->highlightDefaultStyle.'.min.css');
+            $this->app->requireJS('//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js');
+            $this->js(true, (new \atk4\ui\jsChain('hljs'))->initHighlighting());
+            self::$isInitialized = true;
+        }
+    }
 }
 
 $app = new \atk4\ui\App([

demos/tutorial_actions.php

@@ -3,6 +3,7 @@
 require 'init.php';
 require 'database.php';
 
+/** @var \atk4\ui\View $wizard */
 $wizard = $app->add('Wizard');
 $app->stickyGet($wizard->name);
 

demos/view.php

@@ -27,6 +27,7 @@
 }
 
 $app->add(['Header', 'View load HTML from string or file']);
+/** @var \atk4\ui\View $plane */
 $plane = $app->add(['View', 'template' => new \atk4\ui\Template('<div id="{$_id}" class="ui statistic">
     <div class="value">
       <i class="plane icon"></i> {$num}