Project

General

Profile

Actions

Feature #14937

closed

Code highlighting toolbar button

Added by Felix Schäfer over 10 years ago. Updated over 7 years ago.

Status:
Closed
Priority:
Normal
Category:
Wiki
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:
Fixed

Description

Planio has developed and would like to contribute an additional toolbar button, allowing the user to insert the markup for inline code for the supported language of her choice. Clicking the button brings up a modal window with a selector to choose which language the markup should be for and inserts following markup in the wiki field:

<pre><code class="c">

</code>< /pre>

(the closing < /pre> has a space because it trips the renderer otherwise).

The code is as follows (to be added to source:/trunk/public/javascripts/jstoolbar/textile.js@12152):

  // Code
  jsToolBar.prototype.elements.precode = {
    type: 'button',
    title: 'Code',
    fn: {
      wiki: function() {
        precodeTextField = this;

        var codeRayLanguages = ["c", "clojure", "cpp", "css", "delphi", "diff", "erb", "groovy", "haml", "html", "java", "javascript", "json", "php", "python", "ruby", "sql", "text", "xml", "yaml"];

        var languageOptions = [];
        for (var i = 0; i < codeRayLanguages.length; i++) {
          languageOptions[i] = "<option>" + codeRayLanguages[i] + "</option>";
        }
        var languageSelect = "<select>" + languageOptions.join("") + "</select>";
        var hideJs = "hideModal(this);$('#toolbar-code-options').remove();return false;";
        var questionBox = '<div id="toolbar-code-options" style="display: none"><form action="#"><h3 class="title">Code</h3><p><label>Language ' + languageSelect + '</label></p><p class="buttons"><input onclick="precodeTextField.encloseLineSelection(\'<pre><code class=&quot;\' + $(this).closest(\'div\').find(\'select\').first().val() + \'&quot;>\\n\', \'\\n</code></pre>\');'+hideJs+'" type="submit" value="Insert Code"><input onclick="'+hideJs+'" type="button" value="Cancel"></p></form></div>';

        $('#main').append(questionBox);
        showModal('toolbar-code-options', '200px');
        $('#toolbar-code-options select').focus();
      }
    }
  }

(it seems < code> is not supported here anymore or I was too dumb to use it :-/ )


Files

precode.diff (34.9 KB) precode.diff Felix Schäfer, 2013-10-02 20:22
bt_precode.png (389 Bytes) bt_precode.png Felix Schäfer, 2013-10-02 20:22
precode-v2.diff (34.7 KB) precode-v2.diff patch v2 Go MAEDA, 2015-12-25 03:47
precode-v3.diff (34.7 KB) precode-v3.diff patch v3 (Added Markdown support) Go MAEDA, 2015-12-25 08:56
precode-v4.diff (35.3 KB) precode-v4.diff patch v4 (Fixed language files) Go MAEDA, 2015-12-26 05:50
dialogbox-i18n.png (39 KB) dialogbox-i18n.png screenshot (i18n for a dialog box) Go MAEDA, 2016-01-19 14:50
precode-v5.diff (52 KB) precode-v5.diff patch (i18n for a dialog box) Go MAEDA, 2016-01-19 14:51
dropdown.png (6.01 KB) dropdown.png Jean-Philippe Lang, 2016-04-10 08:43
precode-are-covered.png (3.34 KB) precode-are-covered.png holly chen, 2016-08-10 15:14

Related issues

Related to Redmine - Feature #14936: Use a stable and modifiable data structure for jsToolbar elementsNew

Actions
Related to Redmine - Feature #7587: jst Drop-down with syntax coloringClosed2011-02-09

Actions
Related to Redmine - Feature #23106: Add taskpaper 'language' to new code highlighting toolbar button.ClosedJean-Philippe Lang

Actions
Related to Redmine - Feature #32528: Make languages in Highlighted code button in toolbar customizableClosedGo MAEDA

Actions
Has duplicate Redmine - Feature #15133: Code Highlight Button or dropdownClosed

Actions
Has duplicate Redmine - Feature #13394: New "code" button integrated into issue description toolboxClosed

Actions
Actions

Also available in: Atom PDF