4 spaces turns into precode


#1

I am writing some markdown and when i type four spaces at the beginning of a line it render (in various previews) as a pre…I would like to turn this off, or at least be able to style the pre better.

I was using markdown-preview-enhanced, and in that if I open the preview in my browser, the offending css is

code[class*=“language-”], pre[class*=“language-”] {
color: #333;
background: none;
font-family: Consolas, “Liberation Mono”, Menlo, Courier, monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.4;
-moz-tab-size: 8;
-o-tab-size: 8;
tab-size: 8;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

But I cant seem to find where this css is located. It does not appear the markdown-preview-enhanced style.less. the “language-” part is I think the problem, as there is a code and pre section in the style.css.


#2

This is expected, because that’s what the language specifications say. If you are using a different markdown flavour, that does not treat this as code, you may need to find a preview package that supports it.

As for styling it, that can probably be done through the styles.less file. It’s just a matter of finding the scopes, which the dev tools and source code of whatever preview package you’re using can assist with.


#3

You can’t turn it off because it’s part of the markdown syntax. You can change how the preview appears by changing the package settings (Settings -> Packages -> markdown-preview-advanced).


#4

Thanks for the replies!!!
I found the codeblock theme dropdown that damnedscholar mentioned, but how can I create my own or modify the ones given?..where are they kept?


#5

The code isn’t very clear on where the CSS files originate from, but they could be in one of the dependencies.

It would be less effort to just add to your styles.less file. The class of the preview element is mpe-preview.


#6

Do forgive me if I am being obtuse. I am new to atom, and dont quite have the hang of it yet.

From teh command palette I found the style.less file for preview-enhanced.
This already has css for code, but not with the class*=language. When I tried adding the css:

code[class*=“language-”], pre[class*=“language-”] {
color: #333;
background: none;
font-family: Consolas, “Liberation Mono”, Menlo, Courier, monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.4;
-moz-tab-size: 8;
-o-tab-size: 8;
tab-size: 8;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

I get an error related to the presence of “[” and “]”.

Is that what you meant?

re your screenshot, the code block theme I am using is newsprint.
Where do I find the dependencies that you linked to on my system? I looked at the config files. I dont see any package mume in the config/packages folder. Is that where it ought to be?


#7

You should not attempt to edit package code, especially if you don’t know what you’re doing. You have a styles.less file in the .atom/ directory in your user folder. You should add any changes you want to that file.

If you try to edit a package’s code and don’t do it correctly, your changes will be erased when the package is updated.

Also, keep in mind that Atom is based on Chrome and thus has the same dev tools (ctrl-shift-i), so you can look at the compiled HTML and see what classes are on different elements.


#8

Thank you again for your help.

Markdown preview enhanced documentation itself recommends editing the plugin’s pdf export style.less file which is what I was editiing. See here

As to editing the .atom style.less file, I tried that and got the same error.

I am not sure what you meant a while back about “The class of the preview element 2 is mpe-preview.” How would I use that information?