renderer.md

• Introduction
  • Start Developing
  • Logging
  • Create Release Version
  • UI Development
• Read More
• Content Rendering Test Example

Introduction

For how to clone and build this project, checkout the third method mentioned in Installation Guide.

Start Developing

First of all, run:

npm install

This will help you get all deps used by this project. Then you can call:

npm run dev

This will start webpack in watch mode with development flag enabled.

Logging

A custom conole wrapper mditLogger is recommend when you need to log something in Renderer Process. You can import the logger by:

import { mditLogger } from './utils/logger';

function someFunc() {
  mditLogger('debug', 'debug info here.'); // Output: [MarkdownIt] debug info here.
}

Use mditLogger whenever possible.

Create Release Version

To create a release version of this extension, please run:

npm run release # create Release.zip with ./dist included

The script npm run release will:

1. Run npm run build to generate ./dist resources.
2. Run git archive to create a release.zip file contains all code included in git.
3. Run zip -r to add dist directory into previously generated release.zip.

UI Development

You could use React to develop plugin settings UI interface. The entrance of user settings page is src/components/setting_page.js

// react_component_file.js
import React from 'react';

export function YourComponentHere(){
    return (<p>Test</p>);
}

Currently only .js file extension is supported, using .jsx may cause webpack package resolve error.

This might be solved by provide custom package resolve rules to webpack but I didn't look into it.

Read More

Message Rendering Process

HTML Entities Processing

Content Rendering Test Example

You could use Markdown below as a quick Markdown Rendering Test.

# Display Test

## Normal

Normal test

Normal test with HTML Entities & " ' < > .

## List 

- List Item
- List Item

1. Ordered List
2. Ordered List

## Blockquote

> Test
>
>> Nested Test

## Code

Inline Code test `int main(){ return 0; }`

Inline Code test with HTML Entities: `<p>Hello!</p>`

```
// Cpp Code Test
#include <iostream>
int a = 0;
int& b = a;
```

```
Plain text with HTML Entities <p>Hello</p>
```

## LaTeX

$$
\displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
$$

Example Output Screenshot: