Markdown toolbar for USO

Select Markdown format by default, add help links, add toolbar formatting buttons for markdown

< Feedback on Markdown toolbar for USO

Question/comment

§
Posted: 2014-12-07

Some modifications

I was wondering if you can add another/more languages to this script; That would be great :3

§
Posted: 2014-12-07
Edited: 2014-12-07

I've made a simple language switch engine

var __ = (function (l, langs) {
    var lang = langs[l] || langs[l.replace(/-.+/, '')];

    // No matching language, fallback to english
    if (!lang) return function (text) { return text; };

    return function (text) {
        return lang[text] || text;
    };
})(location.pathname.match(/^\/(.+?)\//)[1], {
    // Can be full name, or just the beginning part.
    'zh-CN': {
        Bold: '粗体',
        Italic: '斜体',
        Underline: '下划线',
        Strikethrough: '删除线',
        'Force line break': '强制换行',
        'Horizontal line': '水平分割线',
        URL: '链接',
        'Add URL to selected text': '为所选文字添加链接',
        'Image (https)': '图片 (https)',
        'Convert selected https://url to inline image': '将所选地址转换为行内图片',
        image: '图片描述', // Default image alt value
        Table: '表格',
        'Insert table template': '插入表格模板',
        Code: '代码',
        'Apply CODE markdown to selected text': '将选中代码围起来',

        '\n| head1 | head2 |\n|-------|-------|\n| cell1 | cell2 |\n| cell3 | cell4 |\n':
            '\n| 表头 1 | 表头 2 |\n|-------|-------|\n| 表格 1 | 表格 2 |\n| 表格 3 | 表格 4 |\n'
    }
    // MORE ..
});

// Usage:
__('Bold'); // Localised text or fallback to english.

Edit: Added table template.
Edit 2: Changed default language to current forum language.

wOxxOmAuthor
§
Posted: 2014-12-07
Edited: 2014-12-07

Good idea. Thank you for the code, I guess the script should use the language selector in site header to determine the language.

As for the text I can add Russian to button labels/tooltips, and maybe @decembre can provide French translation for these:

  • B, Bold
  • I, Italic
  • U, Underline
  • S, Strikethrough
  • Force line break
  • Horizontal line
  • Add URL to selected text
  • URL
  • Image (https), Convert selected https://url to inline image
  • Table, Insert table template, | head1 | head2 ||-------|-------|| cell1 | cell2 || cell3 | cell4 |
  • Code, Apply CODE markdown to selected text
§
Posted: 2014-12-07
Edited: 2014-12-07

Aha! I've done the translation for Simplified Chinese on first reply.

I'll add the table template to it later. Done.

wOxxOmAuthor
§
Posted: 2014-12-07
Edited: 2014-12-07
  1. So for B,I,U,S the script should display 粗体, 斜体, 下划线, 删除线 on the button labels too?
  2. I guess I should also add a localized script name/description? If so, please give me the Chinese translation.
§
Posted: 2014-12-07
Edited: 2014-12-07
  1. So for B,I,U,S the script should display 粗体, 斜体, 下划线, 删除线 on the button labels too?
  2. I guess I should also add a localized script name, how would you name it in Chinese?
  1. For B,I,U,S it looks better with only one character; , , and , but English label is fine for me. All (Or most) Chinese forum uses English letter to represent that.
  2. I'm not good at naming, maybe "GreasyFork 论坛 Markdown 小助手"?
wOxxOmAuthor
§
Posted: 2014-12-07
Edited: 2014-12-07

And what about Chinese translation for the script description?

§
Posted: 2014-12-07
Edited: 2014-12-07

And what about Chinese translation for the script description?

@description:zh-CN 在论坛默认使用 Markdown 格式,添加格式帮助链接,以及一个 Markdown 格式工具栏

And for additional info:

+ 常用格式按钮 (仅限 Markdown)
+ 发帖回帖默认使用 Markdown 格式
+ 添加 HTML 及 Markdown 的格式化帮助链接
+ 代码格式化选中文本,自动识别 **行内**(\`) 及 **多行**(\`\`\`) 代码

测试通过于 Firefox+Greasemonkey 以及 Chrome+Tampermonkey.
wOxxOmAuthor
§
Posted: 2014-12-07
Edited: 2014-12-07

Thanks!

The code so far: http://privatepaste.com/e2e34d9d0f

If everything is OK I'll push the update.

§
Posted: 2014-12-07
            try {edWrapInTag('[', ']('+prompt(__("URL:"))+')', edInit(e.target))}

Maybe prompt(__("URL")+':') ?
Other seems fine for me :3

wOxxOmAuthor
§
Posted: 2014-12-07

Oh, good catch, thanks.

§
Posted: 2014-12-07

Oh, good catch, thanks.

You're welcome :3

wOxxOmAuthor
§
Posted: 2014-12-07

Updated the script.

§
Posted: 2014-12-29
Edited: 2014-12-29

A suggestion for Help on hover (Reedit for adaptation for small screen) :

/* (new75) - FORUM - COMMENT HTLM EDIT - HELPER on HOVER - === */
.RadioLabel[for="Form_Format2" ] {
    display: inline-block!important;
    float: right!important;
}

.bodybox-wrap .RadioLabel[for="Form_Format1"]:hover:after {
    position: fixed !important;
    display: inline-block !important;
    content: "Les éléments et attributs suivants sont autorisés.  \A  \A Cela s'applique à la fois au HTML et au Markdown \A (après conversion en HTML  \A  \A * (name, title) | a (href) | abbr | b | \A  blockquote (cite) | br | center | cite |  \A code | dd | del | dfn |  div | dl | dt | em |  \A  h1 | h2 | h3 | h4 | h5 | h6 | hr | i | ins | \A   img (alt, height, src (https), width) |  \A  kbd | li | mark | ol | p | pre | q (cite) |  \A  rp | rt | ruby | s | samp | small | span | strike |  \A  strong | tt | table | tbody | tfoot | thead | \A   td | th | tr | sub | sup |  \A  time (datetime, pubdate) | u | ul | var \A  \A  Les sauts de ligne seront transformés en éléments 

ou
. \A \A Les URL seront automatiquement transformées en liens." !important; width: 25% !important; top: 27%!important; left: 10% !important; padding: 5px !important; background: black !important; color: peru !important; white-space: pre-line !important; z-index: 500 !important; opacity: 1!important; visibility: visible !important; transition: all ease 0.7s!important; } /*OR for GreasyFork Markdown script - Hover on (?) Markdown: .bodybox-wrap .RadioLabel[for="Form_Format2"] a === */ /* .bodybox-wrap .RadioLabel[for="Form_Format2"]:after , */ .bodybox-wrap .RadioLabel[for="Form_Format2"]:hover:after { position: fixed !important; display: inline-block !important; content: "Quick reference guide to the rest of the Markdown syntax. \A \25B6 Headers with ( # ) : \A # Level one header # \A ### Level three header ### \A Headers continue as you’d imagine, with extra hashes. \A \25B6 Links with ( [ ...] ): \A [This is a link](http://www.darkcoding.net) \A \25B6 Blockquote with ( > ): \A > This is quoted \A \25B6 Code : \A Indent text at least 4 spaces for all formatting in it to be ignored. \A # This isn't displayed as header, because it is indented 4 spaces \A Or inline: \A Inline code is `escaped` with backticks (`) \A \25B6 Lists \A \25B6 Unordered lists : use *, + or - : \A * This \A * is \A * a list \A \25B6 Ordered lists : use number followed by period. \A 1. with \A 1. numbers \A \25B6 Horizontal lines with ( - ) : \A Three or more dashes ( - ) ---- \A \25B6 Emphasis \A A single underscore ( _ )or asterix ( * ) is italic, two is bold : \A _italic_ or *italic* \A __bold__ or **bold** \A \25B6 Escaping : \A If you don’t want some of these rules to apply, \A they can be escaped \A by preceding the special character with a backslash ( /\ ): \A This is /\*/\*not/\*/\* in bold." !important; width: 27% !important; top: 10%!important; margin-left: -42% !important; padding: 5px !important; background: black !important; color: peru !important; white-space: pre-line !important; z-index: 500 !important; opacity: 1!important; visibility: visible !important; transition: all 0.7s!important; } .bodybox-wrap .RadioLabel[for="Form_Format2"] a:after , .bodybox-wrap .RadioLabel[for="Form_Format2"]:after , .bodybox-wrap .RadioLabel[for="Form_Format1"]:after { visibility: hidden !important; opacity: 0!important; } @media screen and (max-width: 1400px){ .bodybox-wrap .RadioLabel[for="Form_Format1"]:hover:after { width: 27% !important; top: 28%!important; left: 0.5% !important; } .bodybox-wrap .RadioLabel[for="Form_Format2"]:hover:after { content: "Quick reference guide to the rest of the Markdown syntax. \A \25B6 Headers with ( # ) : \A # Level one header # \A ### Level three header ### \A Headers continue as you’d imagine, with extra hashes. \A \25B6 Links with ( [ ...] ): \A [This is a link](http://www.darkcoding.net) \A \25B6 Blockquote with ( > ): \A > This is quoted \A \25B6 Code : Indent text at least 4 spaces for all formatting in it to be ignored. \A Or inline: \A Inline code is `escaped` with backticks (`) \A \25B6 Unordered lists : use *, + or - : \A \25B6 Ordered lists : use number followed by period. \A 1. with \A 1. numbers \A \25B6 Horizontal lines with ( - ) : \A Three or more dashes ( - ) ---- \A \25B6 Emphasis \A A single underscore ( _ )or asterix ( * ) is italic, two is bold : \A _italic_ or *italic* \A __bold__ or **bold** \A \25B6 Escaping : \A If you don’t want some of these rules to apply, \A they can be escaped \A by preceding the special character with a backslash ( /\ ): \A This is /\*/\*not/\*/\* in bold." !important; width: 27% !important; height: 790px !important; top: 10%!important; margin-left: -50% !important; overflow: hidden!important; overflow-y: auto !important; } /* ==== END MEDIA QUERIES === */ }

§
Posted: 2014-12-29
A suggestion for Help on hover : ...

The author: @wOxxOm

It's better to start a new feedback for further request, so they can get a notification about it.

By the way, would you like to provide French( Please correct me if I was wrong :< ) translation? That would be grateful.

Thanks.

§
Posted: 2014-12-29
Edited: 2014-12-29

French version of the help about Markdown ?

I can but i am not so good in Technical French
So use it carefully....
:-)

content: " Guide de référence rapide de la syntaxe Markdown \A \25B6 En-tête avec ( # ) : \A # En-tête Niveau Un # \A #### En-tête Niveau Trois ### \A Cela continuent comme vous pouvez vous l'imaginer, avec des hashs supplémentaires \A \25B6 Liens avec ( [ ...] ): \A [ Ceci est un lien ](http://www.darkcoding.net) \A \25B6 Blockquote avec ( > ): \A > Ceci est cité \A \25B6 Code : \A Texte en retrait d'moins quatre espaces pour que tout le formatage soit ignoré \A ou en ligne : \A Un code inline est ` échappé` par des guillemets inversés (`) \A \25B6 Listes \A \25B6 listes à puces (non ordonnées) : utilisez *, + or - : \A * Ceci \A * Est \A * Une Liste \A \25B6 Listes ordonnées : ajoutez Un numéro d'utilisation suivie par la période \A 1. Liste \A 1. Avec numéro \A \25B6 Lignes horizontales avec tirets ( - ) : \A Au moins Trois Tirets ( - ) ---- \A \25B6 Accentuation \A Un seul trait de soulignement ( _ ) ou un astérisque ( * ): italique avec ONE (_), Gras avec TWO (_) : \A _italique_ or *italique* \A __gras__ or **gras** \A \25B6 Echappement : \A Si vous ne voulez pas que certaines de ces règles s'appliquent \A elles peuvent être échappées \A en faisant précéder le caractère spécial d'une barre oblique ( / \ ): \A Ceci /\*/\*n'est/\*/\* en gras." !important;

§
Posted: 2014-12-29
French version of the help about Markdown ? I can but i am not so good in Technical French So use it carefully.... :-) ...

No the translation for the script it self.. Format same as what I posted in first reply (can be used as template)

fr: {
  .. french translation goes here ..
}

Thanks.

§
Posted: 2014-12-30
Edited: 2014-12-30

Ha , yes :

var __ = (function (l, langs) {
var lang = langs[l] || langs[l.replace(/-.+/, '')];

// No matching language, fallback to english
if (!lang) return function (text) { return text; };

return function (text) {
return lang[text] || text;
};
})(location.pathname.match(/^\/(.+?)\//)[1], {
// Can be full name, or just the beginning part.
'zh-CN': {
Bold: 'Gras',
Italic: 'Italique',
Underline: 'Souligné',
Strikethrough: 'Barré',
'Force line break': ' Forcer le saut de ligne ',
'Horizontal line': ' ligne horizontale ',
URL: 'URL',
'Add URL to selected text': ' Ajouter URL au texte sélectionné',
'Image (https)': 'Image ( https )',
'Convert selected https://url to inline image': 'Convertir https://url sélectionnés en images',
image: 'Description de l'image', // valeur alt par défaut de l'image
Table: 'Tableau ',
'Insert table template': 'Insérer un modèle de table',
Code: 'Code',
'Apply CODE markdown to selected text': 'appliquer CODE markdown au texte sélectionné',

'\n| head1 | head2 |\n|-------|-------|\n| cell1 | cell2 |\n| cell3 | cell4 |\n':
'\n| En-tête 1 | En-tête 2 |\n|-------|-------|\n| cellule 1 | cellule 2 |\n| cellule 3 | cellule 4 |\n'
}
// MORE ..
});

// Usage:
__('Bold'); // Localised text or fallback to French.

wOxxOmAuthor
§
Posted: 2014-12-30

@decembre, thanks for the French translation of the toolbar buttons, I've updated the script. As for the extended tooltip I really think it's not necessary. Why do you think it is?

§
Posted: 2014-12-30

Nothing is necessary but ...

If it's only to remember a way to use Markdown or Htlm in the forum : It's more fast to drop an eyes on the tooltip than to click on the help link and go to another tab (and return on the comment form).

The link is useful to give more infos.

wOxxOmAuthor
§
Posted: 2014-12-30
Edited: 2014-12-30

@decembre, your point is valid in general, but in the case of this userscript all the markdown tags useful for the greasyfork forum are inserted via the toolbar buttons, there's no need to read the additional syntax help. Well, maybe I'll add the unnumbered and autonumbered list buttons later... As for html syntax tooltip, it's only present 1) because it visually balances the markdown help link in (?) and 2) for an extremely rare need to insert some html tag.

Post reply

Sign in to post a reply.