Feature #14937

Code highlighting toolbar button

Added by Felix Schäfer about 4 years ago. Updated about 1 year ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Jean-Philippe Lang% Done:

0%

Category:Wiki
Target version:3.3.0
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 :-/ )

precode.diff Magnifier (34.9 KB) Felix Schäfer, 2013-10-02 20:22

bt_precode.png (389 Bytes) Felix Schäfer, 2013-10-02 20:22

precode-v2.diff Magnifier - patch v2 (34.7 KB) Go MAEDA, 2015-12-25 03:47

precode-v3.diff Magnifier - patch v3 (Added Markdown support) (34.7 KB) Go MAEDA, 2015-12-25 08:56

precode-v4.diff Magnifier - patch v4 (Fixed language files) (35.3 KB) Go MAEDA, 2015-12-26 05:50

dialogbox-i18n.png - screenshot (i18n for a dialog box) (39 KB) Go MAEDA, 2016-01-19 14:50

precode-v5.diff Magnifier - patch (i18n for a dialog box) (52 KB) Go MAEDA, 2016-01-19 14:51

dropdown.png (6.01 KB) Jean-Philippe Lang, 2016-04-10 08:43

precode-are-covered.png (3.34 KB) holly chen, 2016-08-10 15:14


Related issues

Related to Redmine - Feature #14936: Use a stable and modifiable data structure for jsToolbar ... New
Related to Redmine - Feature #7587: jst Drop-down with syntax coloring Closed 2011-02-09
Related to Redmine - Feature #23106: Add taskpaper 'language' to new code highlighting toolbar... Closed
Duplicated by Redmine - Feature #15133: Code Highlight Button or dropdown Closed
Duplicated by Redmine - Feature #13394: New "code" button integrated into issue description toolbox Closed

Associated revisions

Revision 15316
Added by Jean-Philippe Lang over 1 year ago

Inline code highlighting toolbar button (#14937).

Revision 15317
Added by Jean-Philippe Lang over 1 year ago

Adds translations for the "Highlighted code" button (#14937).

Revision 15567
Added by Jean-Philippe Lang over 1 year ago

Adds missing taskpaper language to the drop down (#14937, #23106).

History

#1 Updated by Terence Mill about 4 years ago

+1

#2 Updated by Francesco V about 4 years ago

+1

#4 Updated by Toshi MARUYAMA about 4 years ago

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

#5 Updated by Terence Mill about 4 years ago

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

#6 Updated by Felix Schäfer about 4 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.

#7 Updated by Terence Mill about 4 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';

#8 Updated by Felix Schäfer about 4 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.

#9 Updated by Mischa The Evil about 4 years ago

  • Duplicated by Feature #15133: Code Highlight Button or dropdown added

#10 Updated by Toshi MARUYAMA about 4 years ago

  • Category set to Wiki

#11 Updated by Mischa The Evil almost 4 years ago

  • Duplicated by Feature #13394: New "code" button integrated into issue description toolbox added

#12 Updated by Mischa The Evil almost 4 years ago

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

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 :-/ )

#13 Updated by Pedro Calvo almost 4 years ago

+1

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

#14 Updated by Jan Jezek almost 4 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/

#15 Updated by Pedro Calvo almost 4 years ago

Great work, Jan!

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

#16 Updated by Mischa The Evil over 2 years ago

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

#17 Updated by Go MAEDA almost 2 years ago

  • File precode-v2.diffMagnifier added
  • Target version changed from Unplanned to Candidate for next major release

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

#18 Updated by Go MAEDA almost 2 years ago

Added Markdown support.

#19 Updated by Go MAEDA almost 2 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';

#20 Updated by Tobias Fischer almost 2 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...

#21 Updated by Go MAEDA almost 2 years ago

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

screenshot (i18n for a dialog box)

#22 Updated by Go MAEDA almost 2 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.

#23 Updated by Tobias Fischer almost 2 years ago

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

#24 Updated by Jean-Philippe Lang over 1 year 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 ?

#25 Updated by Go MAEDA over 1 year 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.

#26 Updated by Jean-Philippe Lang over 1 year ago

  • Assignee set to Jean-Philippe Lang

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

#27 Updated by Jean-Philippe Lang over 1 year 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.

#28 Updated by Jean-Philippe Lang over 1 year ago

  • Subject changed from Inline code highlighting toolbar button to Code highlighting toolbar button

#29 Updated by Jean-Philippe Lang over 1 year ago

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

#30 Updated by holly chen about 1 year 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>")

Also available in: Atom PDF