search

rwildcat / vsc-pandoc-markdown

A VS Code extension for writing (with live preview) Markdown documents using Pandoc.
MIT License
10 stars 3 forks source link

How to provide alternative `article.css` #3

Closed crystalfp closed 2 years ago

crystalfp commented 2 years ago

Thanks for the extension! It is exactly what I was searching for.

But I need a clarifications on how to use the preview styling.

1) What does the article toggle? Seems nothing changes in the preview.

2) How could I provide a customized style? Yes, I could edit the file under .vscode\extensions\rsolano.pandoc-markdown-0.1.2\media but don't think it is an intelligent move. Or should I disable with the toggle the provided style file and add a -H mystyle.css in the pandoc arguments? Maybe adding a VSC setting to provide the path to the customized style could be better. Or clarify relative to what is the location in the pandoc command line.

3) Why the provided *.css files contain HTML tags <style></style>? I think they should be removed.

Thanks for clarifying! mario

rwildcat commented 2 years ago

Hi Mario.

You are welcome; I decided to write it as I didn't find one doing what I needed.

  1. The article toggle option configures the extension to add a css I created based on some good references (please see the Readme file), which has some features I needed. What it does is to add -H article.css to the Pandoc command line. It may look that it does nothing as the screen is rendered after any edition to the file, and activating it in the setting does not trigger a screen refresh. You need to actually edit something to see the effect (centered tables, abstract and images; the aside env, etc)
  2. Sure, you can add your favorite CSS; all you need to do is add it to the YAML metadata block using the option css: <URL>. Keep in mind that because of the CORB feature, the css file should be hosted in a cleared domain such as a CDN. Raw GitHub does not work. The other option is storing the css file locally, next to your file.md, and add it using -H your-file.css in the config section. Please disable the article.css to avoid collisions.
  3. If the css is going to be included as a local file using the -H Pandoc option, the file is included as is in the HTML header, so the corresponding