[EXTENSIONS] Own on‐hover documentation

Welcome!

This documentation will show you how to create on-hover documentation like this for your language:

Getting Started

First, you need to register your extension. You can read how to do that here

Next, open your package.json file and add the following field:

"docs.register": "docs/config"

This is the path to your documentation configuration in .json. The final file should look like this: docs/config.json

After that, you can start writing your documentation

Creating the Configuration File

After creating the file, you must include the minimum required configuration content; otherwise, the extension will not work:

{
    "__$props__": {
        "onMode": "slim"
    }
}

__$props__ is a required field, and so are all the fields inside it. Without it, nothing will work. Field breakdown:

• onMode - the language ID that triggers the documentation. Yes, it doesn't have to be your own. Examples include javascript, php, typescript, json, and others

Documenting Your Code

Once you’ve created __$props__ and configured everything, it’s time to document your code. Let’s look at an example that lets you create documentation just like the screenshot above:

{
    "__$props__": {
        "onMode": "prettyscript"
    },
    "struct": {
        "type": "operator",
        "description": "Used to register object structures for subsequent runtime verification",
        "example": "struct User {\n\tname: string,\n\tage: int\n}\n\nlet user: User = getUser()",

        "sources": [
            {
                "url": "https://example.com/",
                "title": "Reference"
            }
        ]
    }
}

As you can see, you’ve created a struct field and declared the following inside it:

• type - Type. Specifies the type and sets the syntax highlighting. See the list of available types here
• description - Description. Explains what it is for and where
• example - Formatted example. Here you can enter the code example on a single line, but you can use \n and \t for new lines and tabs (Optional; can be left blank)
• sources - Can be links to additional documentation (Optional; can be left blank)