Project

General

Profile

Actions

Feature #14937

closed

Code highlighting toolbar button

Added by Felix Schäfer about 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 #1

Updated by Terence Mill about 10 years ago

+1

Actions #2

Updated by Francesco V about 10 years ago

+1

Actions #4

Updated by Toshi MARUYAMA about 10 years ago

  • Related to Feature #14936: Use a stable and modifiable data structure for jsToolbar elements added
Actions #5

Updated by Terence Mill about 10 years ago

I added the block to my textile.js, butr i still see no new button? Any idea?

Actions #6

Updated by Felix Schäfer about 10 years ago

Terence, unfortunately the textile.js isn't used directly anymore but through a minified version including the toolbar code and the code for the redmine buttons, the minified version is public/javascripts/jstoolbar/jstoolbar-textile.min.js and it's included in source:branches/2.3-stable/lib/redmine/wiki_formatting/textile/helper.rb#L36. You can either add the code to the minified version, or include both jstoolbar.js and textile.js instead of jstoolbar-textile.min.js in the linked helper.

Actions #7

Updated by Terence Mill about 10 years ago

ok, now i have the button, but without any image. How can i give it an image?

Btw. Don#t forhet to mention to add locales for all languages , e.g

source#branches/2.3-stable/public/javascripts/jstoolbar/lang/jstoolbar-en.js

jsToolBar.strings['Code'] = 'Code Highlightning';
Actions #8

Updated by Felix Schäfer about 10 years ago

I have added a full diff that makes the whole thing work, please note that the change to lib/redmine/wiki_formatting/textile/helper.rb is obviously not meant for trunk. The image for the button is also attached.

Actions #9

Updated by Mischa The Evil about 10 years ago

  • Has duplicate Feature #15133: Code Highlight Button or dropdown added
Actions #10

Updated by Toshi MARUYAMA about 10 years ago

  • Category set to Wiki
Actions #11

Updated by Mischa The Evil about 10 years ago

  • Has duplicate Feature #13394: New "code" button integrated into issue description toolbox added
Actions #12

Updated by Mischa The Evil about 10 years ago

  • Subject changed from Inline code toolbar button to Inline code highlighting toolbar button
  • Target version set to Unplanned backlogs

Thanks for contributing this here. I think a lot of users can benefit from a button like this. I think it is worth a place in the core's toolbar.

Felix Schäfer wrote:

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

Off-topic...

Actions #13

Updated by Pedro Calvo about 10 years ago

+1

Thank you Mischa The Evil. This feature would be a great benefit!

Actions #14

Updated by Jan Jezek about 10 years ago

I have made a plugin of the code above. Hope this helps till redmine implements this feature...

https://github.com/mediatainment/redmine_codebutton/

Actions #15

Updated by Pedro Calvo about 10 years ago

Great work, Jan!

Let's see if this little and useful plugin comes to fruition...

Actions #16

Updated by Mischa The Evil over 8 years ago

  • Related to Feature #7587: jst Drop-down with syntax coloring added
Actions #17

Updated by Go MAEDA almost 8 years ago

Very usuful!
Here is a updated patch against the current trunk (r14992). Added support for go, lua and sass.

Actions #18

Updated by Go MAEDA almost 8 years ago

Added Markdown support.

Actions #19

Updated by Go MAEDA almost 8 years ago

Fixed language files (en and es-PA).

diff --git a/public/javascripts/jstoolbar/lang/jstoolbar-en.js b/public/javascripts/jstoolbar/lang/jstoolbar-en.js
index 6427b19..4f72f08 100644
--- a/public/javascripts/jstoolbar/lang/jstoolbar-en.js
+++ b/public/javascripts/jstoolbar/lang/jstoolbar-en.js
@@ -8,7 +8,6 @@ jsToolBar.strings['Heading 1'] = 'Heading 1';
 jsToolBar.strings['Heading 2'] = 'Heading 2';
 jsToolBar.strings['Heading 3'] = 'Heading 3';
 jsToolBar.strings['Highlighted code'] = 'Highlighted code';
-jsToolBar.strings['Highlighted code'] = 'Highlighted code';
 jsToolBar.strings['Unordered list'] = 'Unordered list';
 jsToolBar.strings['Ordered list'] = 'Ordered list';
 jsToolBar.strings['Quote'] = 'Quote';
diff --git a/public/javascripts/jstoolbar/lang/jstoolbar-es-pa.js b/public/javascripts/jstoolbar/lang/jstoolbar-es-pa.js
index 878489f..524a045 100644
--- a/public/javascripts/jstoolbar/lang/jstoolbar-es-pa.js
+++ b/public/javascripts/jstoolbar/lang/jstoolbar-es-pa.js
@@ -7,6 +7,7 @@ jsToolBar.strings['Code'] = 'Código fuente';
 jsToolBar.strings['Heading 1'] = 'Encabezado 1';
 jsToolBar.strings['Heading 2'] = 'Encabezado 2';
 jsToolBar.strings['Heading 3'] = 'Encabezado 3';
+jsToolBar.strings['Highlighted code'] = 'Highlighted code';
 jsToolBar.strings['Unordered list'] = 'Lista sin ordenar';
 jsToolBar.strings['Ordered list'] = 'Lista ordenada';
 jsToolBar.strings['Quote'] = 'Citar';
Actions #20

Updated by Tobias Fischer almost 8 years ago

The plugin by Jan Jezek (https://github.com/mediatainment/redmine_codebutton/) also contains a default language selection via the plugin settings.
This would be very useful as well...

In my case, we use css and xml snippets a lot and set the default language selection to xml for not having to select the drowpdown every time...

Actions #21

Updated by Go MAEDA almost 8 years ago

Updated patch: precode-v5.diff
i18n for a dialog box.

screenshot (i18n for a dialog box)

Actions #22

Updated by Go MAEDA almost 8 years ago

  • Target version changed from Candidate for next major release to 3.3.0

I think this can be one of the highlights of a future release. I am setting target version to 3.3.0.
Thanks for Felix and Planio.

Actions #23

Updated by Tobias Fischer almost 8 years ago

Are there any plans to add a Redmine setting for the default code language?
For details see comment 20 above...

Actions #24

Updated by Jean-Philippe Lang over 7 years ago

I think a modal box is a bit overkill and it makes 4 clicks to select a language. What about using a simple dropdown that is displayed when the button is clicked ?

Actions #25

Updated by Go MAEDA over 7 years ago

Jean-Philippe Lang wrote:

I think a modal box is a bit overkill and it makes 4 clicks to select a language. What about using a simple dropdown that is displayed when the button is clicked ?

What you pointed out was quite right.

Actions #26

Updated by Jean-Philippe Lang over 7 years ago

  • Assignee set to Jean-Philippe Lang

Thanks for the feedback. Feature added as a dropdown menu in r15316.

Actions #27

Updated by Jean-Philippe Lang over 7 years ago

  • Status changed from New to Closed
  • Resolution set to Fixed

Tobias Fischer wrote:

Are there any plans to add a Redmine setting for the default code language?

With the dropdown implementation, there's no default language. 2 clicks are needed for any language.
Most users won't use all of the languages, maybe the list could be made configurable but I think it's fine for now.

Actions #28

Updated by Jean-Philippe Lang over 7 years ago

  • Subject changed from Inline code highlighting toolbar button to Code highlighting toolbar button
Actions #29

Updated by Jean-Philippe Lang over 7 years ago

  • Related to Feature #23106: Add taskpaper 'language' to new code highlighting toolbar button. added
Actions #30

Updated by holly chen over 7 years ago

The code menu was covered in my redmine.

So I just add a z-index property to fix this problem temporary.

in file jstoolbar-textile.min.js
From:

n=$("<ul style='position:absolute;'></ul>")

To:

n=$("<ul style='position:absolute;z-index: 9999;'></ul>")

Actions #31

Updated by Go MAEDA almost 4 years ago

  • Related to Feature #32528: Make languages in Highlighted code button in toolbar customizable added
Actions

Also available in: Atom PDF