I am using the jbimages plug-in. I'd like to use a different icon from tinymce_icons.gif I know where to make the change, but not what it should be. In jbimages I found the following code:
// Add a button that opens a window
editor.addButton('jbimages', {
tooltip: 'Upload an image',
icon : 'image',
text: 'Upload',
onclick: jbBox
});
So where do I found a list of the icon names so I can change it to the icon I want?
Here's how to find the icons and choose the one you want:
TinyMCE version 4 no longer uses tinymce_icons.gif. It uses the icomoon font.
Find the icon you want in icomoon and note the character code (E034 in my case).
Find the character code in skin.min.css.
Look at the name of the css class that inserts that character code (.mce-i-browse in my case).
The icon name is what follows .mce-i ("browse" for me)
I replaced the icon name in plugin.min.js
More information: In Windows you can discover the character code as follows:
Install the font.
Start Word and go to Insert Symbol (more symbols).
Chose the icomoon font.
View the character code in the Insert Symbol dialog.
Related
Hi I am having a word document that contains two languages in it.(e.g. English and Chinese) I am currently manually changing all the Chinese words into another font colour one by one. Are there any ways that I can change all of them in one go?
If your English and Chinese content employ different Styles (which they should), all you need do is change the font colour in the Style definition. This is far more reliable and robust than using Find/Replace; it also automatically applies to any content you add to the document after making the Style change.
If you open the "Find" dialog (Ctrl-H) and click on "More", there should be a "Format" dropdown where you can choose to search by language. This will then open a dialog where you can choose Chinese.
To find all of the words in Chinese, choose "Find in > Main Document" (this will highlight all the matches). Once you do this, you should be able to click on the word document and format the selected text.
I want to add new fonts to tinymce . I put my fonts in tiff format in the following path:
tinymce/themes/advanced/fonts/
In the two files editor_template.js and editor_template_src.js, in the theme_advanced_fonts section, I added the fonts name as follows:
theme_advanced_fonts : "B Nazanin=BNazanin,B Titr=BTitrBd;Andale Mono=andale mono,times;Arial=arial...
It is now displayed in the font dropdown editor, but when I select that font for an example: B Titr, the font of that expression will not be change to B Titr.
Can anyone help?
Are you passing CSS to the editor that includes these fonts? The editor itself is an iFrame so you need to pass CSS to the editor that includes these fonts so that when you try to use them the browser knows how to render them.
https://www.tiny.cloud/docs/configure/content-appearance/#content_css
NetBeans has an option to show non-printable characters, but they are shown with the same vividness as printable characters. This means that a space and a dot are very hard to distinguish: the space is slightly raised, but otherwise visually identical. Many other code editors, and even Gedit, will show non-printing characters greyed out. Is there an option to do this in NetBeans, or do I have to file a bug report?
There is a different (and better) solution compared to my other answer, based on feedback from the OP: download and install the the Editor Whitespace plugin.
Its download page shows that it has not been tested for any version of NetBeans more recent than 8.0, but I have checked that it still works with NetBeans 8.2 and NetBeans 11.2.
To use the plugin:
Click the Download button on the plugin page to install the plugin in some arbitrary location.
In NetBeans: Tools > Plugins > select the Downloaded tab
Click the Add Plugins... button, navigate to the downloaded plugin, click Open, then click Install.
There is no need to restart NetBeans after installing the plugin. Just check the menu option View > Show Non-printable characters to immediately see non-printable characters in source code, excluding line break (¶) characters.
By default the non-printable characters are shown as black dots, but you can use any other color instead:
Tools > Options > Fonts & Colors > Syntax
Select All Languages from the Language drop list, and Whitespace from the Category list. You can select a specific language form the drop list if you prefer.
Using the Foreground drop list, pick the color you want to use to show the dots representing non-printable spaces.
Select Custom... to create your own color if you don't like any of the standard options.
The only benefit to using the plugin is that it suppresses the display of line break (newline) characters, but that is definitely worthwhile. If you have a specific requirement to be able to see line break characters, don't install this plugin, and just use standard NetBeans functionality as described here.
You can change the font color of whitespace characters to any color you want, either for a specific language, or for all languages. Here's how to do it for Java on NetBeans 9:
Tools > Options > Fonts & Colors > Syntax
Select Java from the Language drop list, and Whitespace from the Category list.
Using the Foreground drop list, pick the color you want to use to show the dots representing non-printable spaces. Select Custom... to create your own color if you don't like any of the standard options. As you scroll through the options for Foreground the color of the dots representing printable spaces in the Preview screen change.
Here's a shot showing the color being changed to magenta:
Notes:
The approach described above does not change the color of the line break character at the end of each line, and I don't think that is possible. That is arguably a bug, and at least a missing feature.
Although you can change the Foreground color at any time, it is only relevant when View -> Show Non-printable Characters is checked. Checking that option is also necessary to see the whitespace characters in the Preview screen.
The Background color for Whitespace can also be modified, but the result is invariably ugly and unhelpful.
I've created a language extension (syntax highlighting, etc) and now want to associated a specific icon with the language (or files with the extensions specified in my extension).
I noticed an "icon" property is available in the package.json file, and tried to bind this property to my .svg file. But while syntax highlighting works just fine on a test file, I don't see my custom icon associated with this file.
Where do I add a reference to my .svg file? Do I have to somehow contribute my .svg file to the Seti File Icon Theme?
In vscode v1.64:
Language default icons
Language contributors can define an icon for the language.
"contributes": {
"languages": [
{
"id": "latex",
// ...
"icon": {
"light": "./icons/latex-light.png",
"dark": "./icons/latex-dark.png"
}
}
]
The icon is shown if the current file icon theme only has a generic file icon for the language.
File icon themes like Minimal or None that do not show file icons also
will not use the language icon. Also, if a file icon theme has an icon
for an extension or file name, these will be preferred.
File icon themes can customize the new behavior by defining
showLanguageModeIcons: true|false in the theme file.
showLanguageModeIcons: true shows the default language icons even if
the theme does not specify a file icon
showLanguageModeIcons: false prevents that default language icons are used.
https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_64.md#language-default-icons
File and folder icons are defined in icon sets, the default set being Seti. There is indeed currently no way to re-define those icons in an extension, short of creating your own icon theme. The Seti UI icons are generated from a dependency to the main repo and shipped as a built-in extension.
Therefore, your best bet to get your syntax icon included in VScode is submitting a pull request to the Seti UI repository. At some point, the new icons will be rolled into an icon font by the VScode developers and your icons should appear.
!!
UPDATED: see other comments to proper answer
There is newer version of vscode. So no need for this 'hack' anymore.
!!
Unfortunately you have to specify whole theme icon specification in current version of vscode.
There is PR on github that should allow extend default icons: Support extending icon themes
Before it will be merged and included into new version there is possibility to copy default seti configuration
https://github.com/microsoft/vscode/blob/master/extensions/theme-seti/icons/seti.woff
https://github.com/microsoft/vscode/blob/master/extensions/theme-seti/icons/vs-seti-icon-theme.json
and add your own icon into vs-seti-icon-theme.json config according doc File Icon Theme
Is there any way to customize sidebar in VS Code? In particular, I want to change the font size. Is there a user setting for that? Or, maybe, I can edit it somehow via stylesheet since it's an Electron app, like in Atom?
There are no user-defined stylesheets for vscode.
The only ways to scale various parts of the UI currently are through the overall zoom level (window.zoomLevel) and the editor's font size (editor.fontSize).
I created a feature request for this on the repo.
As mentioned in other answers there are extensions which allow injecting custom CSS, you should be careful using these as they directly manipulate the source code of VS Code which could lead to problems elsewhere and any modifications could break when you update.
I Found a way to change the font of Visual Studio Code Window.
First, open command Pallete, and type "Toggle Developer Tools"
This will open "Chrome Inspector".
Select any text of sidebar of app.
Search .monaco-shell class in "styles" tab at right side inspector ( Where show every styles of the current document ), then the font-family attribute.This is tab and stylesheets.
In workbrench.main.css hit right click and click in "Open Soruce Panel" Show like this
Format the css Code with this icon.
ctrl+f for found font-family attribute again, 'cause the format redirect to end of css document, and get .monaco-shell class like this in ~6371 line.
Change this font ( I have change to Droid sans Mono font ), but you change to you want.
Why i'm not change in the real document css
'Cause, when i changed the font family in the real document css ( C:\Users\${user}\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbrench.main.css) generate a error saying "Vscode have a error, please reinstall the program" or similar
When generate a actualization of application, the font family declareated will deleted, and the document css is´t a pretty code.
This process change every fonts of visual studio code application (not include the editor font )
I found it very effective to use the general zoom settings (it's somewhere in that huge settings window). This adjusts the zoom level of the entire app. Tweak it till you like the size of your explorer window, then adjust the settable editor font to be readable with that zoom level. I three parallel code windows of 80 columns plus the explorer on a good 17" laptop monitor, readable if you are OK with 8pt code font (which is actually 11 point font zoomed two notches down).
Although there is no direct way of customize the sidebar from settings as #Daniel Imms mentioned in his answer, but I found 2 plugins which helped to resolve this issue. You can either one of them if you want.
1. Custom CSS and JS Loader
In Custom CSS and JS Loader plugin, you need to create a custom css and then this plugin will inject that code directly in electron-browser/index.html(as VS Code is an electron based editor). I use this CSS in my Mac:
".explorer-viewlet .mac": "font-size: 1.2em !important",
2. CustomizeUI
CustomizeUI relies on the Monkey Patch Extension to inject custom javascript in VSCode. Here is the settings I use (in settings.json) for my Mac:
"customizeUI.stylesheet": {
".explorer-viewlet .mac": "font-size: 1.2em !important; overflow: auto; border-left:none!important",
},