Code tool updated (#45)

src/frontend/js/classes/codeStyler.js

@@ -1,6 +1,7 @@
 import hljs from 'highlight.js/lib/highlight';
 import javascript from 'highlight.js/lib/languages/javascript';
-import style from 'highlight.js/styles/github-gist.css';
+import xml from 'highlight.js/lib/languages/xml';
+import style from 'highlight.js/styles/atom-one-dark.css';
 
 /**
  * @class CodeStyles
@@ -11,11 +12,12 @@ export default class CodeStyler {
    * @param {string} selector - CSS selector for code blocks
    * @param {string[]} languages - list of languages to highlight, see hljs.listLanguages()
    */
-  constructor({selector, languages = [ 'javascript' ]}) {
+  constructor({selector, languages = [ 'javascript', 'xml' ]}) {
     this.codeBlocksSelector = selector;
     this.languages = languages;
     this.langsAvailable = {
-      javascript
+      javascript,
+      xml
     };
 
     this.init();

src/frontend/js/classes/editor.js

@@ -57,20 +57,20 @@ export default class Editor {
           class: CodeTool,
           shortcut: 'CMD+SHIFT+D'
         },
-        inlineCode: {
-          class: InlineCode,
-          shortcut: 'CMD+SHIFT+C'
-        },
         rawTool: {
           class: RawTool,
           shortcut: 'CMD+SHIFT+R'
         },
+        delimiter: Delimiter,
+        embed: Embed,
+        inlineCode: {
+          class: InlineCode,
+          shortcut: 'CMD+SHIFT+C'
+        },
         marker: {
           class: Marker,
           shortcut: 'CMD+SHIFT+M'
-        },
-        delimiter: Delimiter,
-        embed: Embed
+        }
       },
       data: {
         blocks: [

src/frontend/styles/components/page.pcss

@@ -53,6 +53,11 @@
     letter-spacing: -0.04px;
     margin-bottom: -0.2em;
   }
+
+  .cdx-marker {
+    background: rgba(245,235,111,0.33);
+    padding: 3px 0;
+  }
 }
 
 /**
@@ -79,9 +84,9 @@
  */
 .block-code {
   padding: 20px !important;
-  border-radius: 3px;
+  border-radius: 5px;
   font-size: 13px;
-  border: 1px solid var(--color-line-gray);
+  //border: 1px solid var(--color-line-gray);
   font-family: Menlo,Monaco,Consolas,Courier New,monospace;
   line-height: 1.7em;
 }

src/views/pages/blocks/code.twig

@@ -1 +1,2 @@
-<pre class="block-code">{{ code }}</pre>
+<pre class="block-code">{{ code|escape }}</pre>
+

src/views/pages/form.twig

@@ -7,11 +7,11 @@
     }
   </style>
   <section data-module="writing">
-    <module-settings hidden>
+    <textarea name="module-settings" hidden>
       {
         "page": {{ page | json_encode }}
       }
-    </module-settings>
+    </textarea>
     <header class="writing-header">
       <span class="writing-header__left">
         <span>