Comments (3)
Hey @stezmi
After a long time (really sorry about that) I am now checking for @import statements inside the custom CSS and have these lead the exported CSS.
I didn't want to just put my CSS at the end as I want to allow overriding. Therefore, I am parsing the custom CSS for @import statements now and put these in front.
Will be rolled out with release 0.8.1.
Thanks a lot for the hint
from markdownviewerplusplus.
Hey @stezmi
Do you have a full example?
Thanks
from markdownviewerplusplus.
For example, if we use @import
to include an external style sheet and some Google fonts:
/* Custom CSS */
@import url('markdownpad-github.css');
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans|Cousine');
body { font: 14px 'Open Sans',helvetica,arial,sans-serif; }
pre,code { font: 14px Cousine,consolas,monaco,monospace; }
When we Export as HTML we get the following style in the head of the HTML:
<style type="text/css">
/* Avoid page breaks inside the most common attributes, especially for exports (i.e. PDF) */
td, h1, h2, h3, h4, h5, p, ul, ol, li {
page-break-inside: avoid;
}
/* Custom CSS */
@import url('markdownpad-github.css');
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans|Cousine');
body { font: 14px 'Open Sans',helvetica,arial,sans-serif; }
pre,code { font: 14px Cousine,consolas,monaco,monospace; }
</style>
We can manually edit the HTML to move the at-rules to the top of style
:
<style type="text/css">
@import url('markdownpad-github.css');
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans|Cousine');
/* Avoid page breaks inside the most common attributes, especially for exports (i.e. PDF) */
td, h1, h2, h3, h4, h5, p, ul, ol, li {
page-break-inside: avoid;
}
/* Custom CSS */
body { font: 14px 'Open Sans',helvetica,arial,sans-serif; }
pre,code { font: 14px Cousine,consolas,monaco,monospace; }
</style>
With this example we can clearly see the use of Google fonts when refreshing the page (especially headings). If testing with markdownpad-github.css the code is obvious as well.
Couldn't hotlink example CSS; you can download to test, or use any stylesheet really.
(OT, WRT issue #34: this CSS contains child selectors if you want to test/copy directly into Custom CSS.)
from markdownviewerplusplus.
Related Issues (20)
- Icon not visible with Notepad++ dark theme
- Refresh doesn't work HOT 17
- synchronize scrolling not working HOT 1
- feature request: add url to external css HOT 1
- Notepad produce a functionlist with wrong colors
- Borders around tables? HOT 3
- It doesn't reflect document changes HOT 18
- Cannot dock the markdownviewplusplus as rightside sidebar HOT 1
- No whitespace after bolded and italicized words in HTML
- Images not loading
- Numbered headings? HOT 1
- no maintenance… HOT 15
- Issue with installation HOT 1
- .Net Error opening PHP README.md
- YAML front matter shown incorrectly
- Dark mode request HOT 5
- Unwanted numbered list with leading letters in line
- Add support for collapsible details sections HOT 2
- `NppTbData.pszModuleName` is not properly assigned when Markdown panel is docked
- how to render latex equations?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from markdownviewerplusplus.