I would like to add a ruler at 80 characters. I know that you can add rulers to CodeMirror, but I don't know if I'm supposed to place the corresponding javascript in a file somewhere, or in JupyterLab's Advanced Settings Editor > CodeMirror > User Overides section, or if I should do something else all together to get it working.
I'm using JupyterLab 0.31.8
The feature is available in the recently shipped JupyterLab 1.0.
The feature now is implemented in the current JupyterLab 1.0 alpha (see this PR).
Note: in addition to adding
{
"codeCellConfig": {
"rulers": [80]
}
}
to the Notebook settings as shown above, you can also add
{
"editorConfig": {
"rulers": [80]
}
}
to the Text Editor settings.
Related
I installed the TinyMCE editor on top of a fresh Connections 6.5.1 installation. While syntax highlighting using the codesample plugin is enabled out of the box, it works only for certain languages. I found the codesample_languages, which were overriden like described in this article.
externalPlugins: [{
name: "codesample",
url: "/connections/resources/web/tiny.editors.connections/tinymce/plugins/codesample/plugin.min.js",
settings: {
codesample_global_prismjs: true,
codesample_languages: [
{ text: 'ASP.NET (Core)', value: 'aspnet' },
{ text: 'Apache', value: 'apacheconf' },
{ text: 'Bash', value: 'bash' },
{ text: 'C#', value: 'csharp' },
{ text: 'C++', value: 'cpp' },
{ text: 'CSS', value: 'css' }
]
}
}
]
Now its possible to select them in the editor. But they don't work because the embedded PrismJS from the editor only support extend, insertBefore, DFS, markup, xml, html, mathml, svg, css, clike, javascript, js, c, csharp, cs, dotnet, cpp, java, markup-templating, php, python, py, ruby, rb.
So I loaded the missing plugins from a cdn, e.g. the batch plugin. Including it in header.jsp doesn't work because the Prism namespace is not initialized. In the footer.jsp it seems to have no effect, assuming that PrismJS is already initialized.
Customizing the webresource archive
PrismJS seems to be fetched from https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js so I extracted tiny.editors.connections_4.2.1.1.jar in /opt/IBM/shared/provision/webresources, modified resources/render/prism.js and re-packed those folter:
[centos#cnx65 webresources]$ zip -r tiny.editors.connections_4.2.1.1.jar resources/render/
After restarting Common and Wiki (the application where I'm testing TinyMCE), there is still no syntax highlighting for Bash. Altough when I'm navigating to https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js, I see the Bash plugin code which I have inserted. To see which languages are avaliable, I append
console.log(Object.keys(Prism.languages))
at the end of the file. This gave me an array containing bash. So the plugin is avaliable, but why doesn't TinyMCE show syntax highlighting?
PrismJS was not the problem: Connections changed the way how they use PrismJS. In the past, they just append the class so that we need to include prisms css/js files in the rendered page (e.g. header/footer.jsp). But it seems that since 6.5.1 (CR1), the TinyMCE editor calls PrismJS when a code block is changed. After pressing save, the editor places the entire parsed highlighted HTML with inline css in its HTML.
As a consequence, it's not enough to reload the rendered page in read mode because it was rendered before the lighlight plugin was added. The highlighting works when we click on edit and make a double click in the code block. Then click save in the code modal and also in the wiki page. Now it works:
Highlight in the editor, too
I found out that resources/render/prism.js is responsible for the readonly view, but not the editor itself. If we only add the plugin there, we get no highlighting in the edit view
To fix this, we need to edit resources/tinymce/tinymce-bundle.min.js inside the TinyMCE archive. Add the plugin JS code in the plugins section. For example, before Prism.languages.csharp=.... Now add the modified file to the archive
[centos#cnx65 webresources]$ sudo zip -r tiny.editors.connections_4.2.1.1.jar resources/tinymce/tinymce-bundle.min.js
and restart common + the application you're using (e.g. Wikis). Now the highlighting works both in the readonly view as well inside the editor:
Hi I am developing an extension for VSCode. I am decorating the text editor and hovering some items. Is it possible to make clickable items at hoverMessage and modify the range according to it.
The extension is at:
https://marketplace.visualstudio.com/items?itemName=serayuzgur.crates
You can see the hoverMessage from the GIF
Yes, using markdown you can then create a command link that will execute a command when a user clicks on it:
import * as vscode from 'vscode';
const myContent = new vscode.MarkdownString('[link](command:myCommand?arg1)');
// Command Uris are disabled by default for security reasons.
// If you set this flag, make sure your content is not constructed
// using untrusted/unsanitized text.
myContent.isTrusted = true;
const myHover = new Hover(myContent);
This command can perform whatever action you want
I want to add a new toolbar button on ipython notebook. I got a good link mentioned this.
So I create a new file: ~/.ipython/profile_default/static/custom/custom.js with below content
$([IPython.events]).on('notebook_loaded.Notebook', function(){
IPython.toolbar.add_buttons_group([
{
'label' : 'run qtconsole',
'icon' : 'ui-icon-calculator', // select your icon from http://jqueryui.com/themeroller/
'callback': function(){IPython.notebook.kernel.execute('%qtconsole')}
}
// add more button here if needed.
]);
});
The restart ipython notebook and load the ipython document.
I can see one button at the right of the toolbar.
This issue is the icon seems not displayed correctly.
But I guess it should looks like ui-icon-calculator.
The ui-icon-calculator can be found at themeroller but I am not sure if I need to download it to local disk.
That doc is out of date. jquery-ui icons are no longer available, instead use one from FontAwesome with IPython >= 1.0. See this file for an example custom.js with IPython 1.x.
If you want to:
Display Menu only when open a ipython notebook.
Add a Menu to hide/unhide input cells.
Disable the in/out prompt each cell.
you can following below steps:
Change custom.css to disable the in/out cell prompt
~/.ipython/profile_default/static/custom/custom.css
Add below content:
.prompt{
display: None;
}
Change custom.js to disable toolbar & header line by default.
~/.ipython/profile_default/static/custom/custom.js
Content as below:
code_show=true;
function code_toggle() {
if (code_show){
$('div.input').hide();
} else {
$('div.input').show();
}
code_show = !code_show
}
$([IPython.events]).on('app_initialized.NotebookApp', function(){
$("#view_menu").append("<li id=\"toggle_input\" title=\"Show/Hide Inputs\">Toggle Inputs</li>")
$('div#header').show()
$('div#maintoolbar').hide()
$('div#ipython_notebook').hide()
$('span#save_widget').hide()
$('span#kernel_logo_widget').hide()
});
Restart your notebook server to take effect.
I have a GTK3/Metacity theme which uses dark title bars.
Recent versions of Gnome 3 combine title- and toolbars, e.g. in Nautilus. I want to change their color to be consistent with all other GTK windows.
What is the attribute I need to look for?
The source code for the GTK+ themes is located in the https://git.gnome.org/browse/gnome-themes-standard/ git repository. The styling for the different widgets for Adwaita is located in the themes/Adwaita/gtk-3.0/gtk-widgets.css file -- see the section starting:
/***************
* Header bars *
***************/
Specifically:
.header-bar { ... }
.header-bar:backdrop { ... }
.header-bar .button.text-button { ... }
.header-bar .button.image-button { ... }
Although not 100% sure, I thought Nautilus is a GTK2 application.
If that is the case, you need to create a GTK2 theme next to your GTK3 theme.
You can put these folders next to each other.
Take a look in your /usr/share/themes folder for examples.
Does this help you?
You could install gtk-tweak-tool and configure your system to global-dark-theme.
I'd like to know what's the syntax or the language used to format the code templates in netbeans ide. I mean, in the default templates I can see things like;
while (${EXP default="exp"})
{
${selection line}${cursor}
}
And:
// <editor-fold defaultstate="collapsed" desc="${comment}">
${selection}${cursor}// </editor-fold>
And I experimented and did this:
int ${IDX newVarName default="loop"};
for (${IDX} = 0; ${IDX} < ${SIZE int default="size"}; ${IDX}++)
{
${cursor}
}
And it works but I don't really know where the "${IDX}" or the "${SIZE int default="size"}" or the "${selection}${cursor}" comes from and what other statements can I use to format my templates.
Is this some scripting or programming language?
Where can I find this information?
I think Netbeans uses the template engine Freemarker for this. So all variables (= ${...}) are filled in by Netbeans at the time you use the template.
Unfortunately I don't have a full list of all default variables / methods you can use, but here are two of them listed:
${cursor}:
defines a position where the caret will be located after the editing
of the code template values finishes.
${selection}:
defines a position for pasting the content of the editor selection.
This is used by so-called 'selection templates' that appear as hints
whenever the user selects some text in the editor.
See here: http://wiki.netbeans.org/Java_EditorUsersGuide#How_to_use_Code_Templates
${IDX} looks like a custom variable you use.
See also:
- Code Assistance in the NetBeans IDE Java Editor: A Reference Guide (Code Template)
- Code Templates in NetBeans IDE for PHP
How_to_use_Code_Templates pretty much covers everything there is.
Looking at CodeTemplateParameter.java shows there is another hint called "completionInvoke" which requests showing of the code completion popup for the currently focused text component, but that is all.