shd101wyy / vscode-markdown-preview-enhanced

One of the "BEST" markdown preview extensions for Visual Studio Code
https://shd101wyy.github.io/markdown-preview-enhanced
Other
1.44k stars 172 forks source link

emoji color icons #1461

Open lambdafu opened 5 years ago

lambdafu commented 5 years ago

In markdown-preview, unicode emojis (🍕) are rendered b/w and markdown emojis (:pizza:) are rendered in color (:pizza:). In markdown-preview-enhanced, either is rendered b/w. Would be nice to have color emoji font support. This is on Linux. Thanks!

ghost commented 4 years ago

+10!! Would even be VERY NICE!! It is such a pity, that currently markdown emojis' exports via markdown-preview-enhanced :

d3vr commented 4 years ago

I'm on linux as well, and I had the same issue. Figured out a work around. You need to add an emoji font to the preview (doesn't take the Editor font family into account). So just Ctrl+P and select Markdown Preview Enhanced: Customize CSS and add a font-family property:

.markdown-preview.markdown-preview {
  font-family: "Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif, 'Noto Color Emoji';
}

Noto Color Emoji is the emoji font in my case.

PS: You can use the developer tools to find out which font(s) were being used by the preview so you can maintain that and add the emoji font (Help menu > Toggle Developer Tools)

ghost commented 3 years ago

GREAT D3VR! Thankxx a lot, nice trick, it saved me a lot of mind-bending. Your workaround solved the 3 problems I had with emojis (on Manjaro Linux / Archlinux): 1°) emojis are now correctly rendered:

2°) I had to install these font packages though (of course):

3°) I also had to swap the sans-serif default font position for HTML exports (otherwise your code was not working for me)

.markdown-preview.markdown-preview { font-family: "Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans, JoyPixels, 'Noto Color Emoji', sans-serif; }

Thanks a lot, problem solved for me :+1: