Color Picker & Rich Text/Markdown shortcut like Ms.Office for Naniscript on Visual Studio Code

Share custom commands, script functions, actor implementations and other Naninovel plug-ins you've created.
Post Reply
Restush
Posts: 8
Joined: 31 Aug 2020 08:26

Color Picker & Rich Text/Markdown shortcut like Ms.Office for Naniscript on Visual Studio Code

Post by Restush »


List of current shortcut

  • CTRL + B = Bold
  • CTRL + E = Italic
  • CTRL + U = Underline
  • CTRL + O = Text Color
  • CTRL + M = Mark Text
  • CTRL + R = Align Right
  • CTRL + E = Align Center
  • CTRL + L = Align Left

Requirement for Rich Text/Markdown

Steps for add shortcut for Rich Text/Markdown to Visual Studio Code

  • On Visual Studio Code
  • File -> Preferences -> Keyboard Shortcuts
  • It will open list of keyboard shortcuts tab
  • On Keyboard Shortcuts tab, click "Open Keyboard Shortcuts (JSON)" button in the upper-right corner of the window

Image

  • It will open keybinding.json tab
  • Paste these codes inside Square brackets

Code: Select all

{//bold
        "key":"ctrl+b",
        "scope":"nani",
        "command":"editor.action.insertSnippet",
        "when":"editorTextFocus && editorLangId == naniscript",
        "args":{
            "snippet":"<b>$TM_SELECTED_TEXT</b>$0"
        }
    },
    {//italic
        "key":"ctrl+i",
        "scope":"nani",
        "command":"editor.action.insertSnippet",
        "when":"editorTextFocus && editorLangId == naniscript",
        "args":{
            "snippet":"<i>$TM_SELECTED_TEXT</i>$0"
        }
    },
    {//underline
        "key":"ctrl+u",
        "scope":"nani",
        "command":"editor.action.insertSnippet",
        "when":"editorTextFocus && editorLangId == naniscript",
        "args":{
            "snippet":"<u>$TM_SELECTED_TEXT</u>$0"
        }
    },
    {//text color
        "key":"ctrl+o",
        "scope":"nani",
        "command":"editor.action.insertSnippet",
        "when":"editorTextFocus && editorLangId == naniscript",
        "args":{
            "snippet":"<color=#07eaffff>$TM_SELECTED_TEXT</color>$0"
        }
    },
    {//mark text
        "key":"ctrl+m",
        "scope":"nani",
        "command":"editor.action.insertSnippet",
        "when":"editorTextFocus && editorLangId == naniscript",
        "args":{
            "snippet":"<mark=#ffff00aa>$TM_SELECTED_TEXT</mark>$0"
        }
    },
    {//align right
        "key":"ctrl+r",
        "scope":"nani",
        "command":"editor.action.insertSnippet",
        "when":"editorTextFocus && editorLangId == naniscript",
        "args":{
            "snippet":"<align=\"right\">$TM_SELECTED_TEXT</align>$0"
        }
    },
    {//align center
        "key":"ctrl+e",
        "scope":"nani",
        "command":"editor.action.insertSnippet",
        "when":"editorTextFocus && editorLangId == naniscript",
        "args":{
            "snippet":"<align=\"center\">$TM_SELECTED_TEXT</align>$0"
        }
    },
    {//align left
        "key":"ctrl+l",
        "scope":"nani",
        "command":"editor.action.insertSnippet",
        "when":"editorTextFocus && editorLangId == naniscript",
        "args":{
            "snippet":"<align=\"left\">$TM_SELECTED_TEXT</align>$0"
        }
    },
  • Now you have shortcut for rich text

There are many rich text on Text Mesh Pro, if you want to add more rich text, see rich text reference http://digitalnativestudios.com/textmes ... rich-text/


Add Color Picker into Naniscript

Image

Steps

  • Install Visual Studio Code Extension Color Picker https://marketplace.visualstudio.com/it ... lor-picker
  • After Color Picker installed, on Visual Studio Code, go to File -> Preferences -> Settings
  • It will open Settings tab
  • Click "Open Settings (JSON)" button in the upper-right corner of the window

Image

  • It will open settings.json tab
  • Paste these code

Code: Select all

    "vscode-color-picker.languages": 
    [
    "naniscript",
    "python",
    "javascript",
    "typescript",
    ],
  • Close and re-open Visual Studio Code and you will have color picker
Animal
Posts: 5
Joined: 14 Jul 2022 07:28

Re: Color Picker & Rich Text/Markdown shortcut like Ms.Office for Naniscript on Visual Studio Code

Post by Animal »

Perfect solution! And you can somehow select emoticons from Rich Text "<sprite=31>", for example, at least select a tag, something like this <sprite=31> ?

In general, it would be ideal like this <sprite= :D >
Is it possible ?

Restush
Posts: 8
Joined: 31 Aug 2020 08:26

Re: Color Picker & Rich Text/Markdown shortcut like Ms.Office for Naniscript on Visual Studio Code

Post by Restush »

@Animal Yes, the sprite format will works on Text Mesh Pro. But if you mean change the number of <Sprite=number> to <Sprite= :D > on Visual Studio Code, I don't know.

Post Reply