I could make it run using react-monaco-editor and Webpack 4.
Just adding the MonacoWebpackPlugin did the trick.
Now I'm trying to figure out how to optimise the config for Monaco Editor.
I'm going to use just JS code inside of it and I would like to use just the files for this language.
Looking into the webpack-bundle-analyser, Monaco's files have around 10MB, which is a looot! Also, it loads TS, CSS, JSON, etc.
My code so far:
// Webpack plugin config
new MonacoWebpackPlugin();
// Monaco editor options
const options = {
automaticLayout: false,
cursorStyle: 'line',
fontSize: '14px',
glyphMargin: true,
lineHeight: '16px',
readOnly: false,
renderLineHighlight: 'none',
roundedSelection: false,
selectOnLineNumbers: false,
minimap: {
enabled: false,
},
};
// My Component
<MonacoEditor
language="javascript"
options={options}
value="// type your code here"
onChange={(newValue, e) => console.log('on change monaco editor', newValue)}
editorDidMount={(editor, monaco) => console.log('monaco editor did mount')}
/>
To understand better Monaco environment, I'm trying to look into its documentation, but to be honest, it's not that simple.
Monaco Editor Documentation API
And also, react-monaco-editor GitHub project
Therefore, I would like to ask what direction do I need to go?
Thanks!
Related
I have downloaded prettier from the extensions on visual studio code and I would want to use single quotes instead of double quotes please help
Take a look at the configuration doc.
// prettier.config.js or .prettierrc.js
module.exports = {
trailingComma: "es5",
tabWidth: 4,
semi: false,
singleQuote: true, //what you want
};
Edit: or you can simply go to the extension settings and search for prettier.singleQuote.
I'm new to Monaco and Typescript in general. I'm trying to get JQuery code completion to work on my editor. I've tried just about every example I've been able to find on how to accomplish this. I think I'm pretty close, but probably missing something fundamental.
From the DefinitelyTyped folks, I've gotten their jquery directory and included it in my web project. In the file that is creating my Monaco editor I have the following.
const path = "/jslib/monaco/types/jquery/index.d.ts";
const typings = readTextFile(path);
monaco.languages.typescript.javascriptDefaults.addExtraLib(typings, path);
readTextFile() is just a little function I'm using to get the contents of index.d.ts (which I can confirm is working). Here is the rest of my monaco setup.
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target:
monaco.languages.typescript.ScriptTarget.ES2016,
allowNonTsExtensions: true,
module: monaco.languages.typescript.ModuleKind.System,
noEmit: true,
typeRoots: ["/jslib/monaco/types"],
noLib: true
});
window.editor = monaco.editor.create(document.getElementById('monacodiv'), {
value: $("#formula").val(),
language: 'javascript',
theme: "vs-dark",
autoIndent: true,
dragAndDrop: true,
tabCompletion: true,
fontFamily: "monospace",
scrollBeyondLastLine: false
});
If anyone could let me know what I'm doing wrong, that would be awesome!
So I just ran into this problem, after digging into the DefinitelyTyped definitions, I noticed that index.d.ts is just aggregates the content from four different files (JQueryStatic, JQuery, misc, legacy). Adding the content of all of these files by repeatedly using addExtraLib should work! Otherwise, not sure how monaco could find the contents.
I am making an app using Quill JS and Electron. I want to use Quill's syntax highlighting module and followed the instructions on the API page (https://quilljs.com/docs/modules/syntax/). For some reason, the function does not work (no highlighting is shown in code-block). I switched the <script src=...> tag to require and declared Quill as
quill = new Quill('#editor', {
modules: {
syntax: require('highlight.js'),
toolbar: false
},
theme: 'snow'
});
The result is whenever I type something into the code-block, an error saying " " is not a valid language. I made sure that I included the css file on the main page. What am I doing wrong here?
From the link that you provide. It clearly says
var quill = new Quill('#editor', {
modules: {
syntax: true, // Include syntax module
toolbar: [['code-block']] // Include button in toolbar
},
theme: 'snow'
});
So you only need to set true on that property.
What you have to be careful is to make sure window.hljs is present if you include the script tag before Quill is imported.
Or if you use webpack. You can use ProvidePlugin and set it like this
plugins : [
.
.
new ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js',
"window.hljs": "highlight.js"
})
]
I'm trying to add a third party library to angular2, namely the Flickity slider.
Tried to install typings. When importing them I get en error that #typings/flickity is not a module.
Second attempt to add it in angular-cli.json. Added in apps[0].scripts as described in the docs.
In the component i've used it like this:
this.slider = new Flickity('.news-wrapper', {
cellAlign: 'left',
contain: true,
prevNextButtons: false,
pageDots: true
});
When compiling I get an error Cannot find name 'Flickity'., but when running the site it works like a charm.
The problem is I can't build the app because of that error.
How should it be added then?
follow below steps to use flickity in angular-cli based project
npm install flickity --save
declare module 'flickity'; in typings.d.ts
import * as Flickity from "flickity"; in app.component.ts (needs to import wherever required)
use it like as you mentioned
this.slider = new Flickity('.news-wrapper', { cellAlign: 'left', contain: true, prevNextButtons: false, pageDots: true });
I am not sure if this will work but you can try this in the file that needs flickity.
let Flickity = require('flickity');
Just make sure you installed let Flickity using NPM
I'm using Gulp + Gulpsmith + Metalsmith to create my website.
metalsmith_markdown is rendering my HTML as follows:
# This is an H1 to <h1 id="this-is-an-h1">This is an H1</h1>. Why is it rendering that 'id' tag?
Why might that be?
Here's the part that deals with the markdown rendering in my Gulpfile.js
.use(markdown({
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: true
}))
That's the behavior of metalsmith-markdown which uses marked as Markdown parser since the PR#181.
You can override some features of marked as stated in their Readme and in #420, but since all is handled by the metalsmith plugin, you can't really.
I would advice to create a PR in marked to add a custom option to deactivate completely the behavior near this