Giter Site home page Giter Site logo

joplin-plugin-enhancement's Introduction

Joplin Plugin Enhancement

Generate from the Joplin plugin template: https://joplinapp.org/api/get_started/plugins/

It contains several enhancement for both codemirror and markdown renderer.

Features

Pseudocode

Pseudocode block:

Image

Allow following md works:

![Your Figure Caption Here](/path/to/your/img){width=60%}

This plugin can:

  • Specific the width/height of the image with {width=80px}, {height=30}, {width=50%}
  • Render the image ![]() in a <figure> block with figcaption
  • Use the alt attribute as the figure caption, and display the caption under the image if not empty
  • Center alignment for image and caption
  • Automatic image numbering

Cat and Dog

Table

Auto add row/column, delete column, and format table.

This part mainly comes from takumisoft68: vscode-markdown-table. Please refer to it for the feature description. I just convert the code from vscode's editor to joplin's codemirror. :)

Because I have no idea how to create a context menu, currently all the operations are triggered by shortcut:

Function Shutcut
Insert a row above/below ctrl + shift + up/down
Insert a column left/right ctrl + shift + left/right
Delete current column ctrl + shift + backspace
Navigate to previous cell tab
Navigate to next cell shift + tab
  1. It will automatically format your table code for alignment when navigation between cells with tab
  2. A new line is appended when trying to navigate to next cell from the last cell

Table column colorize from the plugin: hieuthi/joplin-plugin-markdown-table-colorize

tableFormatter

Admonition Renderer in markdown editor

It supports both !!! style and ::: style admonitions.

It conflicts with the 'Align wrapped list items' of Rich Markdown plugin.

This feature could be removed if the conflicts are solved, and it will be pushed to the Rich Markdown plugin.

Admonition Editor Renderer

Enhanced blockquote support

  • It supports [color=red] item in blockquote area so that the blockquote can be rendered with the given color border.
  • [name=SeptemberHX] and [date=20220202]
  • Automatically fold the [xxx=xxx] to keep the editor clean

ColorfulBlockquote

EnhancedQuote

Render Front Matter to Nothing

It just renders the front matter to nothing. It is helpful when you try to keep the front matter part and avoid the unwanted rendered content.

frontMatter

Local file preview

Currently only local pdf file can be previewed.

Quick Commands

Type /command in the editor for quick input of table, mermaid, etc.

  • /table
  • /graph
  • /flowchart
  • /sequenceDiagram
  • /gantt
  • /classDiagram
  • /erDiagram
  • /journey
  • /now
  • /tommorow
  • /today

Auto folder in the editor

  • mermaid block (separate setting)
  • link (separate setting)

Build

Building the plugin

The plugin is built using Webpack, which creates the compiled code in /dist. A JPL archive will also be created at the root, which can use to distribute the plugin.

To build the plugin, simply run npm run dist.

The project is setup to use TypeScript, although you can change the configuration to use plain JavaScript.

Updating the plugin framework

To update the plugin framework, run npm run update.

In general this command tries to do the right thing - in particular it's going to merge the changes in package.json and .gitignore instead of overwriting. It will also leave "/src" as well as README.md untouched.

The file that may cause problem is "webpack.config.js" because it's going to be overwritten. For that reason, if you want to change it, consider creating a separate JavaScript file and include it in webpack.config.js. That way, when you update, you only have to restore the line that include your file.

Thanks to

joplin-plugin-enhancement's People

Contributors

septemberhx avatar lintaoamons avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.