Plugin: Markdown Table - Colorize

Plugins
21

Sorry, if you feel that way. Your theme is indeed the reason I change the default theme but not because I want to take away your effort.

I personally use the colorize theme but I realize many people who want a simple color scheme has to overwrite my CSS. So I change the feature-packed colorize theme to optional, so people can easily overwrite CSS without using too many "!important" keywords.

The default theme is just six background solid colors so you can still share your theme with transparent color which I assume will work different in dark background.

22

Don't worry, it's ok. The transparency was trying to achieve the same result you did with the now default theme. It's all good. :wink:

23

Thanks for creating such a great plugin! I'm really liking the idea. However, have you tried using this with a dark theme? The new default theme as of the last update is completely illegible when using a dark theme.

image

I also tried using the colorize theme and it's better but still not designed with a dark theme in mind.
image

24

The simplest thing you can do is using default theme with black color font by put these in userchrome.css. (Probably will add this to the default css in the next update)

.cm-tabcolor-row {
  color: #212529 !important;
}

I kinda expect people would just customize the color scheme by themselves anyway so I don't want to spend to much time on themeing.

The purpose of the "Colorize" theme is actually not to use it directly but to see what CSS classes are available for customization.

Maybe someone could share some customized CSS in this thread for dark theme.

1 Like
25

Adding that to the userchrome.css helped but the header row is still not legible.
image

Unfortunately I'm not technically proficient enough here to do much customization myself.

For the colorize theme is it possible to make the background behind the arrows follow the background of the theme itself? e.g. instead of white it would be black or whatever the background color of the theme I'm using is.
image

26

Spend of time refining the pre-prepared themes. I include it here in case some one don't check github.

Colorize

Colorize

.cm-tabcolor-row {
    color: var(--joplin-color) !important;
}
.cm-tabcolor-header {
    font-weight: bolder;
    color: var(--joplin-color) !important;
}
.cm-tabcolor-header.cm-tabcolor-pipe {
    font-weight: normal !important;
}
.cm-tabcolor-col1, .cm-tabcolor-col7 {
    background-color: #F07178 !important;
    color: white !important;
}
.cm-tabcolor-col2, .cm-tabcolor-col8 {
    background-color: #C2E98C !important;
    color: #212529 !important;
}
.cm-tabcolor-col3, .cm-tabcolor-col9 {
    background-color: #82AAFF !important;
    color: white !important;
}
.cm-tabcolor-col4, .cm-tabcolor-col10 {
    background-color: #FFCB6C !important;
    color: #212529 !important;
}
.cm-tabcolor-col5, .cm-tabcolor-col11 {
    background-color: #C792E9 !important;
    color: white !important;
}
.cm-tabcolor-col6, .cm-tabcolor-col12 {
    background-color: #8ADDFF !important;
    color: #212529 !important;
}
.cm-tabcolor-firstch::before {
    content: "⇢";
    color: var(--joplin-color) !important;
    background-color: var(--joplin-background-color) !important;
    border-radius: 0% 50% 50% 0%;
}

.cm-tabcolor-lastch {
    border-radius: 0% 50% 50% 0%;
}

No background

No background

.cm-tabcolor-row {
    color: var(--joplin-color) !important;
}
.cm-tabcolor-header {
	font-weight: bolder;
    color: var(--joplin-color) !important;
}
.cm-tabcolor-col1, .cm-tabcolor-col7 {
	background-color: transparent !important;
	color: #007bff !important;
}
.cm-tabcolor-col2, .cm-tabcolor-col8 {
	background-color: transparent !important;
	color: #6c757d !important; 
}
.cm-tabcolor-col3, .cm-tabcolor-col9 {
	background-color: transparent !important;
	color: #28a745 !important;
}
.cm-tabcolor-col4, .cm-tabcolor-col10 {
	background-color: transparent !important;
	color: #dc3545 !important;
}
.cm-tabcolor-col5, .cm-tabcolor-col11 {
	background-color: transparent !important;
	color: #ffc107 !important;
}
.cm-tabcolor-col6, .cm-tabcolor-col12 {
	background-color: transparent !important;
	color: #17a2b8 !important;
}

Just put respective CSS to your userchrome.css.

2 Likes
27

Wow, these are excellent. Thank you so much!

I prefer using the "Colorize" or "No background color" themes so it's irrelevant to me but I'm noticing some strange bugs with the default theme:

In a dark theme if there is a $) in a column header, the column to the right of that has unreadable text. Also bold text turns white.
image

In a light theme there is a similar issue with parentheses being a light gray color.
image

But maybe instead of fixing this you could just make the "No background color" theme the default if you think most would prefer a more simplistic aesthetic but personally I like the "Colorize" theme the most.

Anyway, thanks for the great plugin! This has made working with tables much more pleasant.

Edit: Actually in the colorize theme though it's not as obvious, there are also some lines underneath the $ symbols.
image
image

28

I am aware of the bold and the some other visual bug but there is no easy fix that will not cause additional problem for that as it comes from other plugins. The $ character falsely trigger katex rules and so on which overwrite this plugin rule.

That is also also the reason that the 'official' theme is not the default because whatever the default theme is the same visual problem will still be there. The simply way to alleviate this is explicitly declaring the theme in userchrome.css, as it has higher priority.

The message is, it is recommended to use either 'colorize' or 'nobackground' theme or prepare your own theme in with userchrome.css. The default theme is just there to quickly show that the plugin works and it is meant to be overwritten.

1 Like
30

Would you mind to add numbers to the class of table row? :slightly_smiling_face: .e.g. .cm-tabcolor-row0 .cm-tabcolor-1 etc.

31

Sorry I have no plan to do that as the current setup already make the scrolling a little choppiness in my machine.

32

Ok, nvm, It's not a must. Thanks for the quick reply! :slightly_smiling_face:

33

hi, thank you for the plugin, it's really helpful.
I notice that notes with long table freeze/lag a bit too much here. Would it be possible to add a shortcut to toggle the plugin on/off or just disable the colors for specific notes?

34

more feedback: I don't know for the majority but I usually use table of 3-4 columns max.

I am wondering if a new setting is possible to mitigate the latency for notes with long table ?

Eg: "how much columns to colorize? Select from 1-9" or "Enable the plugin only if table has n cols max". Would it help to reduce the latency?

35

Uhm, I kinda suspect there will be some performance problem with this plugin as I tried to quickly wrap it up for publishing and its development prolongs more than I want to spend time on.

Both of these solutions are too situational for my liking. But I will try to optimize the code which could improve performance a little bit, when I got some time for this project.

Can you tell me, how long the table is (number of rows?) until you start noticing the lagging?

1 Like
36

Here perf decrease with table of 30+ rows.
edit: lag happens also if there are multiple small tables in a note.

37

Wait, when you said "long table" you mean a lot of rows or a lot of columns?

Because a lot of columns should not affect the performance much, and "Enable the plugin only if table has n cols max" will not improve the latency at all in your case as you experimented is from few columns, lot of rows. Right?

38

I mean lof of rows but I thought n* of columns impact perf as well.

ok thanks for the info. That's what I was wondering (if the n* of columns has a perf influence).

39

I tested the plugin with several >100 rows table and it works fine in my machine. It is not the smoothest experience but nothing too bad.

I will eventually update the plugin with code optimization/stabilization anyway. But if I cannot recreate your experience, the update may not fix your issue.

So If you have sample data that I could test, it will increase the chance the next update will fix your problem.

40

yes, sorry I never replied ! I try to find back the note where the issue happen but no luck. Then I've forgot about this ticket...

you have right I finally don't think that a long table is the culprit.

maybe the issue was with a note having many small tables (like 20 or 50 small table maybe) but I try to reproduce the issue and still no luck.

1 Like
41

Version v1.1.4

Changed

  • Change default color scheme
  • Change listening event from "cursorActivity" to "changes" to reduce overload

preview

If you previously found that typing in note with table feel slow, this plugin might be the cause. This update should alleviate that problem. The problem is only noticeable if you have an old computer though.

2 Likes