A Dependency Manager for PHP. While Markdown’s syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown’s syntax is the format of plain text email. The best way to get a feel for Markdown’s formatting syntax is simply to look at a Markdown-formatted document. I want to create a readme.md file for my GitHub but not really sure how to populate it with the correct syntax in order for it to display correctly. Would anyone know if there is a site with tutorials on how to populate the readme.md with the correct synatx? GitHub Gist: instantly share code, notes, and snippets.

A userscript runs in a browser, so it can only contain syntax that is supported by the browser.

Violentmonkey itself is built for modern browsers, to be precise, for Chrome >= 55 and Firefox >= 53. So if your browser has Violentmonkey, it is likely it also supports many ES6 features natively, for example, arrow functions (=>), Promises, block-scoped variables, template literals (`hello, ${name}`), etc.

However, there are many more cool features that are not fully supported by browsers, or some features such as ES modules that won't be supported in userscripts.

In this tutorial we are going to create a project to compile ESNext and other modern syntax to browser compliant code.

Prerequisites

Github Syntax Highlighting

• Make sure you have Node.js >= v10.0 installed.

Initialization

Thanks to npx, we can generate the new project with a one-line command:

Under the hood, we are using Yeoman to create a project with JavaScript toolchain, compiling source code with Babel, and bundling them with Rollup.

Development

Now we should get a project with following structure:

Source code files are kept in src, and will be compiled to dist/index.user.js.

src/meta.js contains the metadata of our script, see Metadata Block for more details.

src/index.js is the entrance of our script, other files in src can be imported.

Compiling and Watching

Source code will be watched by the compiler and compiled to dist once changed.

By installing the compiled userscript from dist, we can test and keep up with the latest code of our userscript. See also How to edit scripts with your favorite editor.

Building

In this way the source code will be compiled exactly once, and saved in dist.

The version of our userscript will be synced with that in package.json.

Features

With Babel and plenty of plugins, we can easily use cool ESNext features. All features included in @babel/preset-env are supported.

JSX

JSX is usually bound with React, compiled to React Nodes. However, we can port the syntax to DOM and simplify our DOM operations, which is exactly what @violentmonkey/dom does.

To use JSX, we need to require a JSX runtime first. Add this in src/meta.js:

Then we can operate DOM elements easily:

CSS

Github Filter Syntax

CSS in this project will be handled by rollup-plugin-postcss, enhanced by PreCSS. In other words, Sass-like markup and staged CSS features are supported in src/**/*.css.

Compiled CSS string can be imported:

CSS Modules

CSS modules is enabled automatically for src/**/*.module.css. When importing from a .module.css file, we get an object as default export, mapping from original class names to hashed class names. The CSS string is imported from a named export stylesheet.

TailwindCSS

TailwindCSS is enabled by default, so you can easily compose classes to build your own CSS.

However, we are building a userscript which should not pollute the global context too much, so we should not use TailwindCSS classes directly in JavaScript or HTML templates.

Github Md File Syntax

Recap

Github Markdown Syntax

Thanks to Babel and Rollup, we can use a lot of modern features in a userscript:

Github Readme Syntax

• ESNext features
• React-like JSX syntax
• Sass-like CSS features
• CSS modules
• TailwindCSS