search

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.47k stars 174 forks source link

Local style has been not working in latest version #1344

Closed tmori3y2 closed 4 years ago

tmori3y2 commented 5 years ago

https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css

https://shd101wyy.github.io/markdown-preview-enhanced/#/file-imports?id=supported-file-types

Local style has been not working in latest version.

I think it was working last week before udate.

Probably because of mume@0.4.0.

shd101wyy commented 5 years ago

I will investigate the issue this weekend. Thanks.

shd101wyy commented 5 years ago

Weird. I just tried it on my ubuntu 18.04 vscode 1.34.0 mpe 0.4.0 and it worked well. Are you using atom or vscode? On which platform? Thank you

mickelti commented 5 years ago

I also have a same issue maybe from 2 weeks ago. I'm using vscode 1.34.0

mickelti commented 5 years ago

I'm sorry. I made a mistake. I noticed it last week.

shd101wyy commented 5 years ago

Which operating system are you using?

mickelti commented 5 years ago

windows10

DavidCDreher commented 5 years ago

I also cannot get the example for local styling as described in https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css?id=styleless to work on Windows 10 with Atom.

shd101wyy commented 5 years ago

Thank you for your reports. I will try to fix the problem as soon as possible (ideally tomorrow evening). Thank you!

shd101wyy commented 5 years ago

Hmmm that is awkward, I just tried a fresh installation of atom editor 1.37 stable on my windows 10, and I didn't encounter the problem like you guys. Since many people have the same problem, I am pretty sure something is wrong in MPE code. Could you guys please try to remove ~/.mume directory (On windows it is located at C:\Users\$username\.mume) then restart your editor to see if it helps? Thank you.

mickelti commented 5 years ago

I tried to delete the .mume directory, but the situation was not changed.

DavidCDreher commented 5 years ago

I tried to delete the .mume directory, but the situation was not changed.

Same for me, no changes

shd101wyy commented 5 years ago

Gerrrr. Which operating system and which editor + version are you guys using? Besides, did you modify the style.less opened from Markdown Preview Enhanced: Customize Css command? May I see your style.less code? Thank you.

shd101wyy commented 5 years ago

Oh, besides all above, which preview theme are you using?

mickelti commented 5 years ago

I do not modify style.less but use local style, because I want to switch the format according to the kind of document. The .less file is as follows.

my-id {

font-size: 0.8em; font-family: "Lucida Grande", Meiryo, sans-serif; h1 { counter-reset: h2counter; text-align: center; font-size: 1.4em; background: #c2edff;/背景色/ padding: 0.5em;/文字まわり（上下左右）の余白/

} h2 { counter-increment: h2counter; counter-reset: h3counter; font-size: 1.2em; border-bottom: solid 2px black; } h3 { counter-increment: h3counter; counter-reset: h4counter; font-size: 1.2em; } h4 { counter-increment: h4counter; font-size: 1.2em; } h2:before { content: counter(h2counter) ". "; } h3:before { content: counter(h2counter) ". " counter(h3counter) ". "; } h4:before { content: counter(h2counter) ". " counter(h3counter) ". " counter(h4counter) ". "; } table { width: 90%; } th, td { word-break: break-all; }

@media print { font-family: "Lucida Grande", Meiryo, sans-serif; } // custom prince pdf export style &.prince { } // custom phantomjs png/jpeg export style &.phantomjs-image { } //custom phantomjs pdf export style &.phantomjs-pdf { } // custom presentation style .reveal .slides { } .slides > section:nth-child(1) { // this will modify the first slide } }

.md-sidebar-toc.md-sidebar-toc { // sidebar TOC style }

DavidCDreher commented 5 years ago

I'm trying the local style from the documentation. Atom 1.37.0 MPE 0.16.1 Win 10 1809 17763.503

Example from the documentation (slightly changed)

Test.md

---
id: "my-id"
class: "my-class1 my-class2"
# HEADING 2
---

@import "my-style.less"

# Heading1

Test paragraph
## Heading 2
#my-id {
    background-color: shd101wyy/markdown-preview-enhanced#222;
    color: #f48342;

    h1, h2, h3, h4, h5, h6 {
        color: #53f442;

    }
}

Output: 2019-06-06 13_27_13-Window

shd101wyy commented 5 years ago

Ah I see. I misunderstood the issue you guys mentioned. I might know where the problem comes from. Let me take a shower first then I will go fix it.

shd101wyy commented 5 years ago

Screenshot from 2019-06-06 23-19-00

A temporary solution is to change the End of Line Sequence from CRLF to LF. Or add an arbitrary comment before @import "*.less" like below:

<!-- start -->
@import "style.less"
DavidCDreher commented 5 years ago

That's already super helpful. Thanks a lot!

shd101wyy commented 5 years ago

Actually, I don't plan to publish a new release so soon, because I just published one yesterday. Please wait till this pr gets merged. Please just use the temporary solution that I post above for now. Thank you!

DavidCDreher commented 5 years ago

No problem. A quick a bit related question: is it possible to overwrite individual style elements from sub blocks like a mermaid diagram somehow using a local style? Say I want to overwrite the #line.today color of a gantt plot. Thank you for being so super responsive!!! 😄

tmori3y2 commented 5 years ago 
<!-- start -->
@import "style.less"

This tips now working. Thanks a lot !

mickelti commented 5 years ago

Oh, its working by <!-- start -->! Thanks a lot !!

parthi2929 commented 5 years ago

Its still not working for me.

michaelschufi commented 5 years ago

On my machine it's working in the preview but not when exporting to PDF with puppeteer. Both features work on 0.3.13.

tmori3y2 commented 4 years ago

It has already been solved in my environment. Can I close it?