UPDATE 18/08/21
Hello !
I update the snippet quickly, and, since a lot of people ask for some other snippet, I renamed the repo. Also, the snippet grow big, and I change a lot. Also, I add a “semi wysiwyg” that create a sort of fusion between the mobile mode and “full” mode.
I recommend to not sync your plugin between PC and mobile, because it will erase your configuration on style settings.
WYSIWYG and Pseudo WYSIWYG
Note : Some screenshoot are outdated, the code is always updated, I don’t have the time to take screen and update it each day.
This is the maximum I can do with only CSS.
The only veritable problem is with the Active-Line : Code mirror can’t have, at the same time, active line + Selection, so it will remove it and the selection will “twinkle”.
In the same way, I can’t render the table as WYSIWYG but the plugin “advanced table” can help a lot to create table.
I use, here :
-
Style Settings
This plugin is required to get the mobile mode.
- Outliner
Style Settings option :
( option exist only on Semi WYSIWYG,
only for WYSIWYG)
- Display Image link
- Mobile support
- Markdown clutter opacity
- Header display
- Icon URL (on mobile)
- Markdown clutter opacity
- Highlight Background
- Header options
- Clutter
- Display the header clutter with “H1”, “H2” etc…
- Font size
- Underline for H1
- Clutter
- Clutter Options
- Opacity
- Active line opacity
- Font size
- Opacity
- Link option :
- Color
- Remplace link by an icon
- Blockquote : Display them and color
- Tags : Color, padding
- Task:
- Color,
- Margin PC,
- Margin Mobile
- Top (only for PC)
Semi WYSIWY note
The main difference between the semi and the full is that :
- Semi doesn’t work on mobile
- All markdown clutter are displayed, I use size and opacity to give them a little space. Active line change only the color.
This Semi WYSIWYG mode is more like the mobile mode on the full snippet. It prevent the “cursor jump” with the text selection.
Information about mobile support
On mobile, the code mirror version used is Code Mirror 6, not Code Mirror 5. So, activeline doesn’t work. I use another “tricks” to create a WYSIWYG view. For example :
- You will see the formatting with a little size and opacity.
- Link will be replaced by a icon, but you can always go to them, and you can saw them with backspace.
- Task will be replaced by symbol. To add the x, just go in and add it, you will see the update. Yeah, it’s a little strange and tricky. I advice you to use the preview to check your task.
Also, I test only on IOS / IpadOS. If you saw any problem on android, please, provide an issue and a solution. I can’t check for android for that.
Installation
It’s more an advice than an obligation, but I update a lot this, so unless you want to download / check the page each minute…
- Clone this repository in your
.obsidian/snippet
- Move
.git
, andwysiwyg.css
snippet in your folder. - Delete the
Obsidian-WYSIWYG
folder.
Now, each time there is a update, you can just do git pull
in a terminal/cmd. You can create a task for that, because sometimes I will not warn user each time !
Note : With this setup, you will not be able to edit the file, because each update erase your personal edit. Create another snippet OR create a pull request/issue with your personal edit.
Screenshot and preview.
Source
There are also other snippet on the repo, as a folder color and folder icons. You can check them too !