[Highlight Plugin] Add line highlight via Prism Line Highlight plugin

Extra: Add Spanish translation to the plugin
Alex-D · Jan 24, 2020 · 7a5bf49 · 7a5bf49
1 parent 5249eeb
commit 7a5bf49
Showing 1 changed file with 18 additions and 5 deletions.
diff --git a/plugins/highlight/trumbowyg.highlight.js b/plugins/highlight/trumbowyg.highlight.js
@@ -5,9 +5,9 @@
     // My plugin default options
     var defaultOptions = {};
 
-    function highlightIt(text, language) {
+    function highlightIt(text, language, lineHighlight) {
         return [
-            '<pre class="language-' + language + '">',
+            '<pre class="language-' + language + '" data-line="' + lineHighlight +'">',
             '<code class="language-' + language + '">' + Prism.highlight(text, Prism.languages[language]) + '</code>',
             '</pre>',
         ].join('');
@@ -36,14 +36,20 @@
                     '<div class="' + trumbowyg.o.prefix + 'highlight-form-group">',
                     '   <textarea class="' + trumbowyg.o.prefix + 'highlight-form-control code"></textarea>',
                     '</div>',
+                    '<div class="' + trumbowyg.o.prefix + 'highlight-form-group">',
+                    '   <input title="'+ trumbowyg.lang.prism_highlight_plugin_alert +
+                            '" placeholder="' + trumbowyg.lang.highlight_line +
+                            '" class="' + trumbowyg.o.prefix + 'highlight-form-control trumbowyg-line-highlight"/>',
+                    '</div>'
                 ].join('\n')),
                 $language = $modal.find('.language'),
-                $code = $modal.find('.code');
+                $code = $modal.find('.code'),
+                $lineHighlight = $modal.find('.trumbowyg-line-highlight');
 
                 // Listen clicks on modal box buttons
                 $modal.on('tbwconfirm', function () {
                     trumbowyg.restoreRange();
-                    trumbowyg.execCmd('insertHTML', highlightIt($code.val(), $language.val()));
+                    trumbowyg.execCmd('insertHTML', highlightIt($code.val(), $language.val(), $lineHighlight.val()));
                     trumbowyg.execCmd('insertHTML', '<p><br></p>');
 
                     trumbowyg.closeModal();
@@ -61,8 +67,15 @@
         langs: {
             // jshint camelcase:false
             en: {
-                highlight: 'Code syntax highlight'
+                highlight: 'Code syntax highlight',
+                highlight_line: 'Highlight lines, e.g.: 1,3-5',
+                prism_highlight_plugin_alert: 'You must have Prism Line Highlight plugin installed'
             },
+            es: {
+                highlight: 'Resaltado de sintaxis de código',
+                highlight_line: 'Resaltar lineas, ej: 1,3-5',
+                prism_highlight_plugin_alert: 'Debes de tener el plugin Prism Line Highlight instalado'
+            }
             pt_br: {
                 highlight: 'Realçar sintaxe de código'
             },