Pseudo-WYSIWYG snippet - Mobile & PC

[Mara-Li]

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)
• Highlight Background
• Header options
  • Clutter
  • Display the header clutter with “H1”, “H2” etc…
  • Font size
  • Underline for H1
• Clutter Options
  • Opacity
  • Active line opacity
  • Font size
• 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…

1. Clone this repository in your .obsidian/snippet
2. Move .git, and wysiwyg.css snippet in your folder.
3. 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.

Full WYSIWYG

Semi WYSIWYG

⚠️ Mobile screenshot are outdated

Source

• Clutter Free
• Pseudo Like WYSIWYG
• Base

---

There are also other snippet on the repo, as a folder color and folder icons. You can check them too !

[Klaas]

Well done, Mara, that is impressive as a WYSIWYG approximation.
Please tell me how, in Edit mode, you reduced the space on the left where the line numbers are. I was told, and have found a way to reduce it. I am curious.

[isle9]

I can’t seem to make this work at all. The only thing I saw working were the checklists. The rest doesn’t change.

[JPC5]

Thanks for your snippet. I have a problem, if I have a transclusion from another document, that line disappears when I activate your CSS. Is it normal?

[Mara-Li]

Sorry for the time I take, I don’t use the forum so much Q.Q

Are you sure do you use the last version of Obsidian and electron ? Because I don’t have problem with multiple PC/IOS/ipadOS.

[Mara-Li]

Sorry for the time I take Q.Q

It’s not normal but not really a surprise. I always work on this snippet and so some problem (read the github), so I will add it to my todo-list.

I will be operational in some hours, when I try and repear this.

[haribol]

Hi, thank you for sharing this. I notice you said:

Note: To activate the “mobile” mode, you just need to have the Style Settings plugin and activate the mobile mode in the settings.

Thank you for sharing about this plugin; it’s very helpful. I installed it, however, I can’t find any way to activate “mobile mode” in the settings for Style Settings …

I was looking for a way to find out which classes to target for mobile mode, so that I can create CSS snippets to target parts of the mobile UI (e.g., the extended keyboard toolbar) – on desktop, it is easy, using developer tools; but I can’t figure out how for mobile. (Turning on “mobile mode” in the dev tools on desktop doesn’t seem to do the trick.)

Thanks to anyone who may be able to share some insight on this.

[Mara-Li]

Hello !
Sorry for the delay ^^"

I spotted a bug with style settings (I updated it some days ago) and they don’t show up because of that. It’s repeared now, so you can activate this mobile mode.

For your another problem, I am in the same situation because I’m on IOS. On android, some tricks can permit to saw the CSS but I don’t know them. Pretty sure you can ask the CSS channel in the discord.

When I work for mobile, it’s really test and try, because I don’t know what part correspond to it :(.

[haribol]

Thank you @Mara-Li … no worries on the delay, I’m also slow at replying to messages.

Hmm, I still don’t see anything like a “mobile mode” toggle in Style Settings; I wonder if you have to add/toggle a certain class on the body element?

I was hoping not to go to Discord, as answers in this forum seem like they can help more people, without the distraction of instant-chat, but maybe I will do that. Thanks for the help; good to know people are discussing this somewhere, even if it’s not visible to a web or forum search (sigh).

And yes, I also use iOS mainly for mobile Obsidian, though I also have an Android for testing.

[Mara-Li]

Well, it’s strange. Have you style settings? Because the options is here.

[Mara-Li]

Hello !
Big big update.

WYSIWYG

As I mainly use and recommend [Code Mirror Options] ; I moved the old styling (wysiwyg.full and wysiwyg.semi) in a PureCSS branch.
I created a new snippet, Code Mirror Companion to get some styling. Noteworthy :

• Hashtags styling
• Links Underline
• A better line for hr
• A cute blockquote (style can be adjusted by style settings)
• A style for comments
  
  

I also revamped wysiwyg.full to only have the mobile support ; You can find it in mobile_wysiwyg.

Folder Icons

As I use Icon Folder, I remove folders.icon (you can find it in PureCSS) and created folder.font_color to keep the colored folder.

I also created a little hover snippet to get some style on hover.

I also created mini.folders.icons to get styling for some file (image, JS…). This snippet allows you to style the alignment and size for all icons.

Folder Note

Note : This snippet must be used with alx folder note

I created an example snippet to illustrate the way I mimic a “real” folder note for some specific folder.

You can style all folder note with :

.alx-folder-with-note .nav-folder-title-content::before {
    content: "\ea37" !important;
    font-family: boxicons !important;
    font-size: var(--size) !important;
}

If you want to remove the icon on some specific folder :

.alx-folder-with-note .nav-file-title[data-path*="file_name"]  .nav-file-title-content::before {
    display: none !important;
}

[vojtanethio]

Is this CSS snippet still working? Links for GitHub lead too archived Repository.

[Mara-Li]

Hello!
I archived the repo because I touch too much the css to use properly with github (also don’t want to have a .git folder and exclude everything).

The new insider version force me to do some change. I think I can create a new repo with the new version for folder note and color, but I will wait until the version is rolled out.

[vojtanethio]

Ok, cool! I´m interested in the new version!

[Mara-Li]

The new version is called Live Preview x). Sorry, I ended to work on theses snippets, as LP was exactly I wanted.

[vojtanethio]

So just basic Obsidian Live Preview?
Or do you have some modded version on GitHub?

[Mara-Li]

Just basic live preview !