Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch off default styles if your own styles are defined in the metadata. #165

Closed
micha06de opened this issue Jun 26, 2024 · 10 comments
Closed

Comments

@micha06de
Copy link

I would like to define the appearance of links in my documents. If I do this in the metadata area, it works, but not always when exporting to HTML. When I export the file to HTML, the default styles are also included there. Firefox sometimes uses these, so that my definitions are not applied. How can I change this?

@mb21
Copy link
Owner

mb21 commented Jun 26, 2024

Can you provide a minimal reproducible example of a markdown document that doesn't work?

@micha06de
Copy link
Author

micha06de commented Jun 26, 2024

Below is the markdown.
In Firefox, the links are not displayed in light blue because they are overwritten by the default CSS (there are two <style> sections in the HTML). The one from Panwriter has been overwritten.

---
title: Test formating in Panwriter
mainfont: Helvetica, Arial, sans-serif
header-includes: |-
  <style>
   h1, h2, h3, h4, h5, h6 {
      margin: 20px 0 10px;
      padding: 0;
      font-weight: bold;
      -webkit-font-smoothing: antialiased;
    }

    h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
      font-size: inherit;
    }

    h1 {
      font-size: 24px;
      color: #000;
    }

    h2 {
      font-size: 20px;
      border-bottom: 1px solid #ccc;
      color: #000;
    }

    h3 {
      font-size: 18px;
    }

    /* LINKS */

    a {
      color: #4183C4;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }
  </style>
---
# Links Beispiele
- [Google](https://www.google.com)  
- [GitHub Panwriter ](https://github.com/mb21/panwriter)

@mb21
Copy link
Owner

mb21 commented Jun 27, 2024

How do you generate the HTML? With File -> Save as or Export ?

they are overwritten by the default CSS (there are two <style> sections in the HTML)

overwritten by which default CSS? from panwriter or pandoc?

In the other issue you wrote:

there should not be an embedded style section in the YAML area of the Markdown, as this overwrites the definitions from default.yaml.

I'm confused. which do you expect to take precedence?

@micha06de
Copy link
Author

Sorry for the late response, I was away for a few days.

How do you generate the HTML? With File -> Save as or Export ?

With export.

overwritten by which default CSS? from panwriter or pandoc?

Neither, in the generated HTML there are two style sections one below the other, with partly contradictory definitions for the elements, which different browsers probably interpret differently.

It would be better if there was a CSS template that the user could customize as desired, so that the HTML only contains one style section. This is what MarkdownPad does, for example.

@mb21
Copy link
Owner

mb21 commented Jul 7, 2024

Okay, now I understand.

which different browsers probably interpret differently.

No, nowadays all browsers behave exactly the same in regards to such basic things.

In Firefox, the links are not displayed in light blue

That's because in your browser you have visited those links, so the a:visited color applies.

Now, where the two style sections come from. The second is your CSS from the markdown document, the first style is the document-css from pandoc's own template. You can turn it off by adding the following to your markdown document's metadata:

document-css: false

But the idea of this feature was actually that you would only override a few document-specific styles. If you want to change everything, it's probably better to add a ~/Library/Application Support/PanWriterUserData/default.yaml (or ~/.pandoc/templates/styles.html) file so that it applies to all your documents.

@micha06de
Copy link
Author

But the idea of this feature was actually that you would only override a few document-specific styles. If you want to change everything, it's probably better to add a ~/.pandoc/templates/styles.html file so that it applies to all your documents.

Now I just need to know how the styles.html must be composed ...

@mb21
Copy link
Owner

mb21 commented Jul 8, 2024

Or actually better, add a default.yaml file in the PanWriter User Data Directory, then you can keep the format and it will be previewed correctly. See the PanWriter Manaul

@micha06de
Copy link
Author

How do you generate the HTML? With File -> Save as or Export ?

Hmm, I have just noticed that only .md is available for selection under 'Save as'. Should .html also be available here?

@micha06de
Copy link
Author

Or actually better, add a default.yaml file in the PanWriter User Data Directory, then you can keep the format and it will be previewed correctly. See the PanWriter Manaul

Good tip, I tried it and it works! Thank you very much!

@mb21
Copy link
Owner

mb21 commented Jul 8, 2024

Hmm, I have just noticed that only .md is available for selection under 'Save as'. Should .html also be available here?

No, .md is just saving the exact text you currently have in the PanWriter editor while .html actually needs an export by running it through pandoc.

@mb21 mb21 closed this as completed Jul 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants