GithubHelp home page GithubHelp logo

kkpan11 / table-extended Goto Github PK

View Code? Open in Web Editor NEW

This project forked from aidenlx/table-extended

0.0 1.0 0.0 105 KB

Extend basic table in Obsidian with MultiMarkdown table syntax

JavaScript 9.91% TypeScript 90.09%

table-extended's Introduction

Table Extended

Extend basic table in Obsidian with MultiMarkdown table syntax.

image

Intro

Obsidian's built-in table syntax can only define the basics for tables. When users try to apply complex tables with colspan or multiple headers, their only option is to fall back to raw HTML, which is difficult to read and edit.

This plugin brings MultiMarkdown table syntax to Obsidian, which provides the following features with internal links and embeds intact:

Known issue

  • This plugin is not yet compatible with Advanced Tables, as its auto-formatting would break the mmd6 table syntax.
  • table with -tx- may sometimes ignore escape characters, for example, \| fails to escape | in table, only \\| works
  • extended native syntax may not work sometimes, with console output: failed to get Markdown text, escaping...

How to use

The latest version use a new syntax to indicate extended tables in favor of fenced tx code blocks, which allow better support for backlinks and forward links, which use a leading -tx- before table:

PS: For expermental extended native syntax support which eliminate the need for -tx- prefix, check here

-tx-
|             |          Grouping           || 
First Header  | Second Header | Third Header | 
 ------------ | :-----------: | -----------: | 
Content       |          *Long Cell*        || 
Content       |   **Cell**    |         Cell | 
New section   |     More      |         Data | 
And more      | With an escaped '\|'       || 
[Prototype table]

would be render as:

Prototype table
Grouping
First Header Second Header Third Header
Content Long Cell
Content Cell Cell
New section More Data
And more With an escaped '|'

For more detailed guide, check markdown-it-multimd-table README and MultiMarkdown User's Guide

Expermental: Extended Native Syntax

Note: the following features are not supported:

Extended syntax is allowed in Obsidian's regular tables when option is enabled is the setting tab:

The following table:

First Header  | Second Header | Third Header |
 ------------ | :-----------: | -----------: |
Content       |          *Long Cell*        ||
Content       |   **Cell**    |         Cell |
New section   |     More      |         Data |
And more      | With an escaped '\|'       ||

would be render as:

First Header Second Header Third Header
Content Long Cell
Content Cell Cell
New section More Data
And more With an escaped '|'

Multiline

Backslash at end merges with line content below.

|   Markdown   | Rendered HTML |
|--------------|---------------|
|    *Italic*  | *Italic*      | \
|              |               |
|    - Item 1  | - Item 1      | \
|    - Item 2  | - Item 2      |
|    ```python | ```python       \
|    .1 + .2   | .1 + .2         \
|    ```       | ```           |

This is parsed below:

Markdown Rendered HTML
*Italic*

Italic

- Item 1
- Item 2
  • Item 1
  • Item 2
```python
.1 + .2
```
.1 + .2

Rowspan

^^ indicates cells being merged above.

Stage | Direct Products | ATP Yields
----: | --------------: | ---------:
Glycolysis | 2 ATP ||
^^ | 2 NADH | 3--5 ATP |
Pyruvaye oxidation | 2 NADH | 5 ATP |
Citric acid cycle | 2 ATP ||
^^ | 6 NADH | 15 ATP |
^^ | 2 FADH2 | 3 ATP |
**30--32** ATP |||

This is parsed below:

Stage Direct Products ATP Yields
Glycolysis 2 ATP
2 NADH 3–5 ATP
Pyruvaye oxidation 2 NADH 5 ATP
Citric acid cycle 2 ATP
6 NADH 15 ATP
2 FADH2 3 ATP
30–32 ATP

Multiline Header

|             |          Grouping           ||
First Header  | Second Header | Third Header |
 ------------ | :-----------: | -----------: |
Content       |          *Long Cell*        ||

rendered as:

Grouping
First Header Second Header Third Header
Content Long Cell

Headerless

Table header can be eliminated.

|--|--|--|--|--|--|--|--|
||  |||||||
|  ||||  ||||
||  ||  |  |  |  |  |
|  ||  |  ||  |  |  |
|  |  |  |  ||  |  |  |
|  |  |  |  |  ||  |  |
|||||  ||||
||||||  |  ||

This is parsed below:

Compatibility

The required API feature is only available for Obsidian v0.12.0+.

Installation

From Obsidian

  1. Open Settings > Third-party plugin
  2. Make sure Safe mode is off
  3. Click Browse community plugins
  4. Search for this plugin
  5. Click Install
  6. Once installed, close the community plugins window and the patch is ready to use.

From GitHub

  1. Download the Latest Release from the Releases section of the GitHub Repository
  2. Put files to your vault's plugins folder: <vault>/.obsidian/plugins/table-extended
  3. Reload Obsidian
  4. If prompted about Safe Mode, you can disable safe mode and enable the plugin. Otherwise, head to Settings, third-party plugins, make sure safe mode is off and enable the plugin from there.

Note: The .obsidian folder may be hidden. On macOS, you should be able to press Command+Shift+Dot to show the folder in Finder.

Behind the scene

Due to the restriction of the current Obsidian API, the built-in markdown parser is not configurable. Instead, This plugin includes an standalone Markdown parser markdown-it with pluginmarkdown-it-multimd-table, and table sections and the texts inside code block with language tag tx are passed to markdown-it. The internal links and embeds, however, are extracted and passed to Obsidian, so the core features of obsidian remain intact.

Noted that the plugin may behave differently from the official MultiMarkdown compiler and Obsidian's parser, Please pose an issue if there are unexpected results for sensible inputs.

table-extended's People

Contributors

aidenlx avatar

Watchers

 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.