How to integrate markdown-it-emoji into VS Code - node.js

VisualStudio Code has great support for Markdown by using markdown-it, and there is an extension named markdown-it-emoji to allow emojis in markdown directly. I tried to install that in VS Code, but I don't see emojis rendered in the VS Code Preview.
This is what I have done:
npm install markdown-it-emoji --save-dev
My package.json looks like that
"devDependencies": { "markdown-it": "^8.3.1", "markdown-it-emoji": "^1.3.0"}
What do I have to do to use markdown-it-emoji in VS Code?

I work on VSCode and maintain the builtin markdown extension. As of VSCode 1.12, you cannot extend VSCode's builtin markdown viewer to support emojis
However, we are exploring allowing extensions to contribute functionality to VSCode's builtin markdown preview: https://github.com/Microsoft/vscode/issues/22916 I've even created an example extension that adds emoji support to the preview. To try the preview extension:
Make sure you are on VSCode 1.12+
Install the VSIX from the extension repo
Add the setting "markdown.enableExperimentalExtensionApi": true to your user or workspace settings
Keep in mind that this functionality is experimental. We have not yet committed to markdown extension extensions yet and the API / functionality may change
Also, please let me know if you are developing a markdown extension extension for VSCode

Emoji direct are still unsupported in VSC as of version 1.12.1; See: Emoji Code Extension For VSC by Idleberg | idleberg.emoji-code ... | Includes snippets for inclusion into code (.htm), (.js), (.css), (.ts), (.py) and (.rb) | But, not for (.md) | Standard rendering of :emoji: in (.md) currently unavailable in VSC | Also, cannot raise idleberg snippet at key 'ji' in (.md) either ... :musical_note:

Related

Atom editor not showing suggestions or importing node modules

I have been using VSCode for several years, but I recently decided to move to Atom. VSCode has built-in a ton of features, including a very well-built auto-suggestion system. Whenever I started typing something in VSCode, I got a suggestion. Unfortunately, this is not the case in Atom.
I have tried autocomplete-modules, autocomplete-paths, and atom-ternjs, but with no luck. What I want is a proper, working autosuggestion system that also imports on select.
I work with Material-UI and Material Design Icons and both of these were automatically suggested and imported in VSCode. I mostly write JavaScript for React.js and Node.js for the backend.
you have to install for language https://github.com/atom/autocomplete-plus/wiki/Autocomplete-Providers
read this https://atom.io/packages/autocomplete-plus

How to create a software that can be used as a browser extension in python?

I have written a python program to download YouTube videos. I want to add it as an extension to browser, but I have read that browser doesn't run python scripts. So how can I deploy it? Can I convert it into a software which when installed can be added as a plug-in to the browser? Or is there any other way of doing it?
I assume you are aware of the chrome extension/plugin development, If not, please go through online tutorials, Fast forward...
Adding Python to the Chrome extension
We have two options to add Python into a chrome extension:
Method 1: Include
Brython
in an iframe (requires server)
To run Python in the browser you have several options including Brython and emcascripten.
Method 2: Compile Python to Javascript using
Rapydscript
(best, serverless, pure extension.)
There are several tools to compile Python to Javascript. Rapydscript works fine, Pyjs does not work well with chrome.
Further, you can do your research.

Configuring Vim/Neovim ALE plugin to support :ALEGoToDefinition in JavaScript files

I installed the ALE plugin for Vim using vim-plug:
Plug 'dense-analysis/ale'
The plugin seems to have been installed correctly. I can use ALE to automatically format files with Prettier, for example. But I can't seem to get anything that uses the language server to work.
For example, in the following JavaScript file, putting my cursor over the name add on line 5 and using the :ALEGoToDefinition command has no effect.
function add(x, y) {
return x + y;
}
console.log(add(1, 2));
I have really made an effort to read the documentation. The ALE help file says that "ALE will do nothing" if an LSP server does not provide a location to jump to. That seems to be my problem. But the ALE documentation on GitHub also says that "ALE integrates with almost all JavaScript tools very well, and most things should work without requiring any configuration."
I must be missing something. Aside from installing ALE, is anything needed to enable features which use a language server? Should I install some kind of language server globally on my machine?
User toupeira on Reddit answered this question for me. At the time of this writing, the only JavaScript language server that ALE supports is tsserver. It ships with TypeScript. To enable ALE's language server features, I needed to install the typescript package globally.
npm install -g typescript
I don't need to start the server manually. ALE seems to take care of that.
The only other requirement is that tsserver is enabled as a JavaScript "linter." It is by default. Run :ALEInfo to see which linters are enabled for the current file.

Having source code for third party javascript libraries available whilst debugging

I would like to know whether it is possible to have third-party javascript libraries' source code available whilst debugging.
FYI, I use npm/nodejs and the angular CLI (which itself relies on Webpack).
Example libraries (together with their source languages) that I would like to have available during debugging are:
Angular 2 (typescript)
RxJS (typescript)
I guess what I want to achieve is related to configuring source maps.
Any comment or guidance welcome.
edit: Can someone please advise how to configure the angular CLI in order to have angular and RxJS typescript sources available whilst debugging?
Yes, to be able to set breakpoints in source files while debugging, you need sourcemaps. But this is not the thing that can be configured in the IDE, you need to set up your build tools accordingly. The only thing that should be configured on the IDE end is the run configuration - you might need to specify Remote URL mappings for your project directories
To complement lena's answer and as of #angular/cli version's 6.1 is it now possible to output source maps for vendor libraries using the following syntax:
ng serve --source-map --vendor-source-map
It also works for the ng build command.
See also: https://blog.ninja-squad.com/2018/07/27/angular-cli-6.1/
It is then possible to debug third-party libraries using an IDE or the browser.

Moodle Atto 'plugin not found'

I've been trying to use the Atto plugin template (https://github.com/justinhunt/moodle-atto_newtemplate) to try and create my own Atto plugin. I've made the changes outlined in the README, and got shifter to run via npm. It appears to generate the build folder that matches the other plugins.
I'm able to see the plugin in configuration, and it's showing up in the Atto Toolbar Settings, but, when I pop open a text editor, I don't get an icon, and the console logs moodle-editor_atto-editor: Plugin 'testplugin' could not be found - skipping initialisation
I've found a few references in the docs that shifter is no longer used, and grunt is the new way to go, but I can't find any actual docs on this, and no gruntfile seems to exist anywhere.
Has anyone come across this before? What am I missing?
You will need to run shifter on your YUI code for it to work - the usual way of doing that, for Moodle 2.9 and above is to use grunt - see https://docs.moodle.org/dev/Grunt for more details.
Not sure if this was ever resolved. The template is really helpful and it also comes with lib, db, and version PHP scripts. The string that you use as the plugin name has to be consistent throughout these scripts, as well as in your JS file. By default, it is set to atto_NEWTEMPLATE. Did you perhaps change this string to atto_testplugin in one place but not in all the others?

Resources