Why is Markdown rendering <h1> with id's? - javascript

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

Related

want to use single quotes by using prettier code formatter VS CODE

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.

How to fix "Error: HTMLHint not found, ..., CodeMirror HTML linting cannot run." error in CodeMirror

I want to get HTML linting working for my CodeMirror instance. I'm able to get CSS and JS linting working fine but HTML linting is not working. I'm still getting the "Error: HTMLHint not found, not defined on window, or not available through define/require, CodeMirror HTML linting cannot run." error in the console log for HTML. Where do I include the global "HTMLHint" variable?
I have already downloaded the required HTML linting file (// Depends on htmlhint.js from http://htmlhint.com/js/htmlhint.js) and linked it in the "<head>".
<head>
<script src="plugin/HTMLHint-develop/dist/htmlhint.js"></script>
</head>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
theme: "rubyblue",
mode: "htmlmixed",
scrollbarStyle: "simple",
indentUnit: 4,
lineNumbers: true,
lineWrapping: true,
foldGutter: true,
lint: true
});
</script>
I would expect that the linting would work based on the "<script></script>" tag. Obviously I must be missing something.
Within the HTML Hint js file it says:
// Depends on htmlhint.js from http://htmlhint.com/js/htmlhint.js
Here is a working link in github.
https://raw.githubusercontent.com/htmlhint/brackets-htmlhint/master/htmlhint/htmlhint.js
Simply include it in your page.

Why does name property output nothing in the Edge browser when compressed?

So I'm using a module that queries content based on its type and to figure out what content it is looking for, it must first build the query string by using various functions like Not, And, type, typeIs etc. One of these functions is causing me issues in production; Mainly the typeIs function. Here is how it is implemented.
public typeIs<TNewType>(newTypeAssertion: new (...args: any[]) => TNewType) {
this.stringValue = `TypeIs:${newTypeAssertion.name}` // Here is the issue
this.segmentType = 'typeIs'
return this.finialize<TNewType>()
}
Now the problem with this is that when the code gets minified, by default all function names will get compressed, mangled etc. To solve this problem I set my minimizer to keep function names. Here is how it looks.
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
terserOptions: {
keep_fnames: true
}
})
]
This works great in chrome but the problem is that this doesn't work in edge.
Here is a screenshot to show what I mean.
You can see that I've highlighted the word Typeis: in the image and the reason for this is because that is the part of the query string that is malformed. It should have been Typeis:User for it to work properly.
How I solved this isdue was by setting my minimizer to look like this:
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
terserOptions: {
keep_fnames: true,
compress: false // This setting is crucial for it work on edge.
}
})
]
and now here is how it looks on Edge.
As you can see, now the query string is no longer malformed because there was no compression. Obviously I want my code to be compressed to lower my bundle size and have gone through many of its compress options to figure out which option is the culprit but to no avail.
My question is, why does the name property output nothing in the Edge browser when compressed and not in chrome?
The comment made by user kzc in this github issued helped me solved this problem(https://github.com/terser-js/terser/issues/120).
In his comment, he mentioned that it was a bug related to these 6 compression options
collapse_vars
inline=3
join_vars
loops
reduce_vars
sequences (depending on the code)
unused
After finding that out, it was just matter of looking at the output bundle and making some logically deductions as to which one caused this issue. Turns out it was the reduce_vars option.
Now my minimizer looks like this
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
terserOptions: {
mangle: true,
compress: {
reduce_vars: false
},
keep_fnames: true
}
})
]
Looking at the terser documentation for its compression options, this is what reduce_vars does.
reduce_vars (default: true) -- Improve optimization on variables assigned with and used as constant values.
which makes sense as to why setting it to false solved this issue. At the top of the file my output bundle consisted of constant variables that hold references to modules that I imported and at some point in the compression stage, it reduced those variables so much that it probably couldn't figure out what module that variable belong to. That is just what I think and maybe someone else can chime in on this issue.

How to get JQuery Code Completion in Monaco Editor?

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.

How to optimize Monaco Editor with React and Webpack 4

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!

Categories