How to highlight C-like Code using CodeMirror? - codemirror

I am using codeMirror to highlight C program code. I followed the official document to configure:
$(".cCodeMirror").each(function(){
var cEditor = CodeMirror.fromTextArea($(this)[0], {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-csrc",
readOnly: true,
styleActiveLine: true,
theme: "eclipse"
});
});
But I can see the code as follows:
Notice no syntax is highlighted such as int keyword looks plain text, printf() function is plain text and so on. What am I missing? here is the live url: here
Any Idea?

Did you make sure to add the clike.js and eclipse.css?
Hosted by cdnjs:
https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.42.2/theme/eclipse.min.css
https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.42.2/mode/clike/clike.min.js
DEMO: https://codepen.io/quic5/pen/ebMKNV

Related

Latest version tinyMCE.remove() method appears to save changes to the textarea by default (with no explicit saving)

I am using a single instance on a page with many other fields and when the other fields gain focus, I call tinyMCE.remove() to remove the iframe and show the marked up text in the textarea it was refrencing. However, even without explicitly saving the content, it appreas that the remove() method will actually save whatever changes were made. This is actually acceptable for our use of the control, but I there is no documentation stating this will happen. So I'm concerned that a future version may 'fix' this and then I'll have to be sure to explicitly save the content first. Also the 'cancel' doesn't appear to do anything when including it.
Has anyone else experience this?
I was able to confirm this with the following:
Where txtDetails is the textarea used on the tinyMCE init.
$("textarea").focus(function () {
console.log($("#txtDetails").val());
tinymce.activeEditor.remove();
console.log($("#txtDetails").val());
});
This is the tinyMCE init used:
tinymce.init({
selector: '#' + clientID, //'#tinyEditor',
plugins: 'code link', // save
menubar: false,
toolbar: 'link bold italic underline forecolor', // save cancel
toolbar_mode: 'floating',
paste_block_drop: true,
paste_merge_formats: true,
paste_as_text: false,
paste_webkit_styles: 'color font-size',
smart_paste: false,
statusbar: false,
//save_enablewhendirty: false,
force_br_newlines: true,
newline_behavior: 'linebreak',
link_target_list: [
{ title: 'New page', value: '_blank' }
],
default_link_target: '_blank',
link_assume_external_targets: 'https',
init_instance_callback: function (editor) {
var $html = document.getElementById(clientID).value;
editor.setContent($html);
} //,
// save_onsavecallback: () => {
// tinymce.remove();
// },
// save_oncancelcallback: () => {
// tinymce.remove();
// }
I'm getting the same behavior with or without the save plugin.
It is expected behavior. And it is not specific to the latest version.
TinyMCE sticks to the textarea/div/etc. to change their content. But once TinyMCE is removed - it leaves the content as is.
Imagine that you need to edit the textarea content successively with two different editors. It would be much more complicated if one of the editors cleans the textarea on remove().
If you need to clean the textarea before remove(), you can call something like setContent(''). But don't forget to save the content somewhere with getContent().
I'd also recommend considering calling destroy() instead of remove, as, besides the editor itself, it removes all events, element references, etc., preventing memory leaks. destroy() calls remove() during execution.

Is there a way to enable intellisense autocomplete in quotes without using key binding (Ctrl + Space) in Visual Studio Code

I want to develop an extension for Visual Studio Code.
I'v registered a CompletionItemProvider for typescript, when I'm trying to write in quotes the auto completion does not work.
For example I have this code:
function buildProvider(language : vscode.DocumentSelector, label : string, text : string | vscode.CompletionItemLabel){
return vscode.languages.registerCompletionItemProvider('typescript', {
provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken, context: vscode.CompletionContext) {
const simpleCompletion = new vscode.CompletionItem('', vscode.CompletionItemKind.Text);
simpleCompletion.label = label;
simpleCompletion.insertText = text.toString();
return [
simpleCompletion,
];
}
});
}
If I write in typescript the auto completion work:
Auto completion works
If I write in quotes it doesn't work without using Ctrl + Space.
Auto completion does not works
What can I do to enable the auto completion in quotes?
That behaviour, not working in strings, is probably a result of the setting:
editor.quickSuggestions.
Try setting it like this:
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true // this is the key setting, default is false3
}
That will fix it for you or anyone with the same "strings": true setting.
You can change a user's default settings in an extension like this in your `package.json - beware they may not like you changing their settings!!:
> #### Configuration Defaults Overrides
>
>
> You can now override defaults of other registered configurations
> through `configurationDefaults` contribution point in `package.json`.
> For example, the following snippet overrides the default behavior of
> `files.autoSave` setting to auto save files on focus change.
```jsonc
"contributes": {
"configurationDefaults": { // applies to all languages
"files.autoSave": "onFocusChange"
}
}
Note: Configurations with application or machine scopes cannot be
overridden.
From https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_63.md#configuration-defaults-overrides

How can I set up VSCode to put curly braces on the same line?

By default this
{path: '/post/:postId', component: Post},
are converting to this
{
path: '/post/:postId',
component: Post
},
How can I disable this behavior?
UPD. I am coding in JavaScript, last time in vuejs with vetur plugin
UPD2. Code expample.
// before
export default new Router({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/todo', component: Todo },
]
})
// after formatting (curly braces are moved on new line)
export default new Router({
routes: [{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/todo',
component: Todo
},
]
})
UPD 3. Maybe Prettier will be useful to solve this task?
UPD 4. In my case, the problem was in the additional plugin for formatting. Beautify was installed as the default option for formatting and all settings for vscode formatter was not working.
The solution is set vscode formatter or prettier by default.
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
Thanks all. Especially for maven87.
The settings you are looking for are:
{
// Defines whether an open brace is put onto a new line for control blocks or not.
"javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
// Defines whether an open brace is put onto a new line for functions or not.
"javascript.format.placeOpenBraceOnNewLineForFunctions": false
}
Please refer to the User and Workspace Settings article. It covers similar settings for other languages too.
If that doesn't provide enough control you may also choose to use Beautify
and specify a .jsbeautifyrc
with a setting for brace style as follows:
{
"js": {
"brace_style": "collapse,preserve-inline"
}
}
Please refer to this to see all possible values.
UPDATE
It was pointed out that there is another degree of control where if you would like to change the formatter completely, you do so by installing the correct VS Code plugin and then configuring the appropriate formatter (see User and Workspace Settings article). For example:
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
}
In this case the formatter being used is Prettier - Code formatter
In VS Code go to settings:
"File->Preferences->Settings"
In settings search "curly".
It will search below settings, unckeck them and verify if it works as expected.
enter image description here
In my case, the problem was in the additional plugin for formatting. Beautify was installed as the default option for formatting and all settings for vscode formatter was not working.
The solution is set vscode formatter or prettier by default.
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},

In Visual Code (mac) is there a way to start at the second placeholder on a snippet?

I love to use snippets in the form of:
println("MyVariable:" + MyVariable);
So I end up creating snippets like this:
SnippetBody:[ "printlns(\"$1:\" + $1);" ]
The problem is that I want the focus on the second $1 so the intellisense triggers. Since the focus is on the first $1 and it's a string, then there is no intellisense.
Thanks!
If all you want is for autocomplete to work on strings, you can look at the settings and set:
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
}
Then you start typing and use CtrlSpace to trigger the list.

How to get rid of annoying "newNode: node, offset: number" popup (intellisense?)

When editing javascript with Visual Studio Code I continuously get a useless and obtrusive popup showing some sort of irrelevant method signature
It also won't go away when typing. Even escape won't remove it but clicking in some other code usually does.
My current user config looks as follows
// Place your settings in this file to overwrite the default settings
{
"python.pythonPath": "/home/ivo/Atom/bin/python",
"python.linting.pylintEnabled": false,
"python.linting.flake8Enabled": true,
"python.unitTest.nosetestsEnabled": true,
"python.unitTest.nosetestPath": "bin/django",
"python.unitTest.nosetestArgs": ["test", "apps/"],
"python.unitTest.unittestEnabled": false,
"editor.acceptSuggestionOnEnter": false,
"editor.fontSize": 13,
"editor.renderControlCharacters": true,
"editor.useTabStops": false,
"editor.suggestOnTriggerCharacters": false,
"editor.wordBasedSuggestions": false,
"editor.quickSuggestions": false
}
To stop showing the annoying hint popups, open "settings.json" in VSCode:
(File -> Preferences -> Settings).
Add the following line to the setting file (including quotes), and save it:
"editor.parameterHints": false