Plugin: Markdown Table - Colorize

While I like taking notes using markdown, its table syntax is extremely messy. I create this plugin to improve the user experiment when dealing with table editing. It marks each column with different colors so you can know what column it belongs to. The colors can be customized with CSS, of course.

While I try my best to follow markdown-it logics, the markdown table parser is more messy than I expected so I will not surprise that there is some bugs that I didn't catch. Please use it with your own risks.

18 Likes

Ohh! Wonderful. I had been waiting for someone to build this.

Thanks! I'll give it a try.

Will you add it to the repository?

OK! So little setback. Here is the error report:

Summary

Error
The text editor encountered a fatal error and could not continue. The error might be due to a plugin, so please try to disable some of them and try again.

To report the error, please copy the entire content of this page and post it on Joplin forum or GitHub.

If the error persists you may try to restart in safe mode, which will temporarily disable all plugins.

Message
Cannot read property 'length' of undefined

Version info
Joplin for Desktop

Copyright © 2016-2021 Laurent Cozic
Joplin 2.4.9 (prod, win32)

Client ID: 55ce0b2fbc8e4c0c8c573a6923b41b59
Sync Version: 3
Profile Version: 39
Keychain Supported: Yes

Revision: bb44c4e
Plugins
[
{
"id": "joplin.plugin.note.tabs",
"name": "Note Tabs",
"enabled": true,
"version": "1.4.0"
},
{
"id": "joplin.plugin.benji.favorites",
"name": "Favorites",
"enabled": true,
"version": "1.3.0"
},
{
"id": "org.joplinapp.plugins.ToggleSidebars",
"name": "Note list and sidebar toggle buttons",
"enabled": true,
"version": "1.0.3"
},
{
"id": "io.github.jackgruber.backup",
"name": "Simple Backup",
"enabled": true,
"version": "1.0.3"
},
{
"id": "joplin.plugin.benji.persistentLayout",
"name": "Persistent Editor Layout",
"enabled": true,
"version": "2.2.0"
},
{
"id": "joplin-insert-date",
"name": "Insert Date",
"enabled": true,
"version": "1.0.1"
},
{
"id": "plugin.calebjohn.rich-markdown",
"name": "Rich Markdown",
"enabled": true,
"version": "0.7.3"
},
{
"id": "com.whatever.quick-links",
"name": "Quick Links",
"enabled": true,
"version": "1.2.2"
},
{
"id": "joplin.plugin.ambrt.fold-cm",
"name": "Folding in Code Mirror Editor",
"enabled": false,
"version": "2.0.1"
},
{
"id": "com.coderrsid.pasteSpecial",
"name": "Paste Special",
"enabled": true,
"version": "1.1.2"
},
{
"id": "com.shantanugoel.JoplinCMLineNumbersPlugin",
"name": "CodeMirror Line Numbers",
"enabled": true,
"version": "2.0.0"
},
{
"id": "net.rmusin.joplin-table-formatter",
"name": "Table Formatter Plugin",
"enabled": true,
"version": "1.2.1"
},
{
"id": "joplin.marcteyssier.linksmetadata",
"name": "Links Metadata",
"enabled": true,
"version": "1.0.0"
},
{
"id": "io.github.jackgruber.note-overview",
"name": "Note overview",
"enabled": true,
"version": "1.5.4"
},
{
"id": "com.andrejilderda.macOSTheme",
"name": "macOS theme",
"enabled": false,
"version": "1.2.6"
},
{
"id": "outline",
"name": "Outline",
"enabled": true,
"version": "1.2.7"
},
{
"id": "joplin.plugin.templates",
"name": "Templates",
"enabled": true,
"version": "2.2.0"
},
{
"id": "com.hieuthi.joplin.markdown-table-colorize",
"name": "Markdown Table: Colorize",
"enabled": true,
"version": "1.0.0"
}
]
Stack trace
TypeError: Cannot read property 'length' of undefined
at calcState (C:\Users\user.config\joplin-desktop\cache\com.hieuthi.joplin.markdown-table-colorize\mdTableColorize.js:51:50)
at C:\Users\user.config\joplin-desktop\cache\com.hieuthi.joplin.markdown-table-colorize\mdTableColorize.js:180:19
at runInOp (C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:3915:18)
at CodeMirror.operation (C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:8590:37)
at colorizeTable (C:\Users\user.config\joplin-desktop\cache\com.hieuthi.joplin.markdown-table-colorize\mdTableColorize.js:158:6)
at signal (C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:568:61)
at DisplayUpdate.finish (C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:4019:16)
at endOperation_finish (C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:3908:19)
at endOperations (C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:3807:9)
at C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:3790:7
Component stack

in ForwardRef(Editor) (created by ForwardRef(CodeMirror))
in div (created by ForwardRef(CodeMirror))
in div (created by ForwardRef(CodeMirror))
in div (created by ForwardRef(CodeMirror))
in ErrorBoundary (created by ForwardRef(CodeMirror))
in ForwardRef(CodeMirror) (created by NoteEditor)
in div (created by NoteEditor)
in div (created by NoteEditor)
in div (created by NoteEditor)
in NoteEditor (created by Connect(NoteEditor))
in Connect(NoteEditor) (created by ResizableLayout)
in div (created by styled.div)
in styled.div (created by ResizableLayout)
in div (created by ResizableLayout)
in div (created by ResizableLayout)
in div (created by ResizableLayout)
in ResizableLayout (created by MainScreenComponent)
in div (created by MainScreenComponent)
in MainScreenComponent (created by Connect(MainScreenComponent))
in Connect(MainScreenComponent) (created by NavigatorComponent)
in div (created by NavigatorComponent)
in NavigatorComponent (created by Connect(NavigatorComponent))
in Connect(NavigatorComponent) (created by RootComponent)
in ThemeProvider (created by RootComponent)
in StyleSheetManager (created by RootComponent)
in RootComponent (created by Connect(RootComponent))
in Connect(RootComponent)
in ErrorBoundary

I like the idea! Thanks you!
But one thing, can I just color the text not the background?

Thank for your report. I think I know what the problem is but not sure it will work in your machine or not. Can you try version 1.0.1 and report back if the problem still there?

Sure you can. I prepared a simple theme that not uses background color. You just need to copy the content in this file nobackground.css and paste it to your userchrome.css.

7 Likes

Version 1.0.1 fixes the errors here.

Thanks for the good work :+1:

2 Likes

Works now!

Not sure if you noticed this, @CalebJohn. I wonder if this functionality could be added to the Rich Markdown plugin. It's good also as a stand alone plugin too.

Thanks so much @hieuthi !

1 Like

I did notice this, and updated the rich markdown issue tracker accordingly :).

I won't be adding this functionality to the rich markdown plugin, but I'll probably add a link to the readme to suggest that people install this plugin for a nicer markdown table experience.

Nice work @hieuthi, this is a great addition to the Joplin plugin ecosystem.

3 Likes

Thank everyone. I made plugin mostly for my own uses, but I'm glad that people find it useful for themselves.

Wow great, i will try it when i can !

@hieuthi Is it possiable to give the whole table a parant container?

Yeah, I also run into that question while developing this plugin. I assumed CodeMirror should already have something like that it place but turn out it is not, table text is just normal code text. So it is possible, but I don't think there is a recommended way to do it. It is better to keep the code simple and as less intrusive as possible so it will not interfere with other plugin. I may consider an update with some minor tweaks that allow more sophisticated theme-ing in future.

1 Like

As you said, "markdown table syntax is messy." I definitely agree with that, but I have one other concern is too much color on the markdown editor is just like another kind of messy. So, in my situtation, I'm trying to figure out how can I reduce the use of unnecessary colors.

I'm happy to see you post this plugin, after a few trys I want to share 2 of my thoughts:

  • Keep the markdown table text color simple, I think user don't need it showing all the colors at the same time
  • Only light up the whole related column when user are typing on that column or hovering on that column

Overall, I think that would looks more clean. Would you have any similary solution?

That sounds like a good idea. It just looks to be a lot of work that I willing to take. That being said what you told seem to be achievable with some advanced CSS and the current version of the plugin. So maybe you can give it a try.

1 Like

Ya, I'm still trying on it and I hope that's work :see_no_evil:

I've created a PR with a transparent background, so that I can keep the font the same as now, and the color is just hinting the column.

Please give feedback.

Thanks @madpipeline for the nice theme. I don't accept PR for themes at the moment as future version will likely introduce new CSS classes and there are so many different ways to customize it to each person's preference.

So how about you share your css in this thread so people can use it when they are browsing through this thread.

Spend some times to refactor the source code and add some simple css classes for more customization. Also changed the default color to more subdue scheme and move more advanced customization to optional themes instead.

New CSS classes mark the first, the last, and the pipe characters. I can add more classes for even more dynamic interactions but that requires some actual coding which I don't think it is worth the trouble. Probably I will just focus on developing new plugins for now.

4 Likes

There is no point in sharing my theme since you already adopted that idea in the Colorize theme.

This is not very nice: to refuse a PR and then implement that change your self. You could have just said that you wanted to implement that idea in a different way, and I would be totally fine with it.

OK, it's not the Colorize theme. None of the themes in your themes/ matches the first screenshot in the README.md.

It's the default theme now. Which is great for the project, I love it.