Updated with the proper link to the example
I am using a Hugo theme that comes with bundled with CSS and uses Highlight.JS for syntax highlighting. The web pages I have created show a plain "courier" based fixed width font in the code blocks see here for example of my site page
I would like to use another font, like sans-mono or something more neat looking, like it shows on Highlight.JS web page here
I'm not super familiar with Javascript and CSS, just trying to use them. Is there an easier way to tell Highlight.JS to use specific font? Assuming I have font files available.
Thanks
ZeeKay
Add this to your CSS:
pre > code {
font-family: "Sans Mono", "Consolas", "Courier", monospace;
}
This will use the first font in that list that is available on the user’s system. Sometimes fonts have different spacing that their real names, so for example if "Sans Mono" doesn’t work, try "SansMono". Make sure to put monospace last so that at least some suitable font is chosen if the user doesn’t have any of the listed fonts.
If this doesn’t work, maybe it’s due to a selector specificity problem, where the default styles provided by highlight.js are overriding your own styles. Something that will help avoid this is putting the <link> that loads your CSS file after the one to load the highlight.js CSS file. If this doesn’t work, you will have to make the pre > code selector more specific, such as changing it to #main pre > code if all page content is wrapped in an element with the ID main.
If you’re not sure how to add CSS, the easiest way is to put it in the HTML template surrounded by <style></style> tags. Though it’s better to put it in a CSS file and reference it with <link rel="stylesheet" href="myStyles.css">.
Related
I would like to be able to prevent a CSS file from applying to the inside of a DIV tag.
The CSS file is included in the <head> section of a HTML document. I cannot remove the file or change it. All I have control of is the inside of that DIV tag. The HTML document is generated with MediaWiki, so I'm not allowed to use iFrames. I cannot host my content anywhere else, but I can take external resources such as CSS and javascript, upload them, and include them in the inside of my DIV.
Currently, I have Jquery, and I can include all sorts of external libraries.
Using jQuery to find the <link rel="stylesheet" href=...> and then .remove()ing it does work, but that messes up the rest of the page, which I am prevented from doing by a LOT of red tape.
Is there a way to "javascriptically" do something to the stylesheet such that it applies only to anything that's not inside my DIV? Maybe using the :not() selector?
I have no idea, and I have never touched the not selector before. Please help. Thank you.
You can't make prevent CSS from applying to a part of the document, even if you could change it (which is doable with Javascript as long as you don't care about users with no Javascript). You have two options basically:
Override the CSS. Probably the least painful way is to take some CSS reset stylesheet and prefix every rule so that #1 it only applies to your div, #2 it has high enough specificity to override all MediaWiki rules. You can then apply your own styles on top of that.
Make the div not part of the document. You could create an iframe in Javascript and move the contents of the DIV there. (Shadow DOM would be a nicer approach but there is not much browser support yet.)
I've a web app built using AngularJS.
I want to set the font to 'bariol Regular' throughout my entire web app.
For it I tried following code in common css file but it didn't changed the current font or is the font getting changed but at the same time getting override with other font. I'm not understanding the exact cause.
body {
font-family: bariol Regular;
}
I didn't download anything, didn't give any URL for the font in css, etc.,etc.
I just wrote above line of code in common css file.
Can someone please guide me in this regard please? Thanks.
Try something like this,
#font-face { font-family: bariol Regular; src: url('your_source'); }
hope it helps.
first of all check here for proper font-adding: How to add some non-standard font to a website?
Second inspect an element that didn't change it's font, find out what rules might override your rule and act accordingly (you can always add "!important" to your css rule and with the right selector it should change the font in all your pages)
I am using a python library to convert HTML page into PDF.
It does it correctly, except it only handles inline styling. It does not reflect the styling applied to DOM elements using external style sheets.
So, as a solution I am thinking of adding those CSS styling from all the external CSS stylesheets into the head tag of the html file and then send it to get converted into pdf.
But, I am not sure how? Can anyone give me any ideas or atleast suggestion on how to go around fixing that? Or, if they know a better solution.
Much appreciate
Is the python running outside or client-side? You can examine the solution here # http://www.xportability.com/XEPOnline/FOTestSuite.html. While this does a lot more, you can reach through that page to the included Javascript. Look for flattenstyle.js for inspiration.
Because our handling is different, we actually copy a selected div element to another hidden div and "flatten" the style by extracting styles we want. What you could do is run such a javascript on page load and save out the div and not destroy it, then you have most all the print styling in the HTML.
Lets say I put the following in <body>
<script src="https://gist.github.com/2059.js"> </script>
looking at that js file, the first line is:
document.write('<link rel="stylesheet" href="https://gist.github.com/stylesheets/gist/embed.css"/>')
I don't have write permission to that js file. Is it possible to dynamically swap out embed.css and swap in the href to another version of that CSS file? Can this be done such that it requires no user input - the page will load with my own CSS file and not embed.css?
The easiest option here is going to be to load your own CSS in a way that will override the Gist CSS - this is going to be much simpler than trying to dynamically change the code Gist provides. Two options for this:
Add !important to your CSS declarations.
Use the same selectors as the Gist CSS, but prefix them with another selector to make them more specific than the Gist CSS declarations, e.g. mycontentarea .gist-syntax .c
The second option is probably going to be more reliable, as long as you know a selector for an enclosing element. See a working example here (I've replaced the standard Gist string color with a nasty yellow): http://jsfiddle.net/aqGEc/
I'm currently developing a Safari extension that uses an injected script to further inject some HTML into the current webpage, as well as injecting some other scripts to make it work. This is all working fine, but the issue is that the HTML that is injected gets affected by CSS stylesheets that the webpage has already imported. For example, the HTML looks perfect on Google.com (which has relatively little CSS styling), but awful on StackOverflow.com (which styles buttons etc).
jQuery is injected into the webpage at the time of this HTML being displayed, so I have that available. I've tried all kinds of things, including walking through all of the elements and calling removeClass() on each of them, to no avail. I've also tried to add "CSS reset" classes, etc, but nothing seems to be working.
What's the best way to go around preventing the CSS from interfering with my HTML?
You can't prevent that from happen. However, you can override the CSS rules. Give your main element a unique id (which really should be unique by obfustation, like "yourapplicationname_mainelement_name" or something), then override all possible styles that might give strange effects on your html.
Your plugin:
<div id="yourapplicationname_mainelement_name">
<p>My paragraph that must not be styled</p>
</div>
Your css:
#yourapplicationname_mainelement_name p {
display: block;
color: black;
background: white;
position: relative;
... and so on ...
}
As your css style rules are the most specific, given your id, they will override any settings present on the page where your html is injected.
Further... It might be hard to see what rules are the most important. You can use firebug or similar to understand which is overriding another. You'll have a hard time without it when developing your application.
that's a tough one. two options as I see it.
You could set a wrapping div around all your content and prefix all your css with that. example:
<body>
<div class='wrappingDiv'>
...
</div>
</body>
stylesheet:
.wrappingDiv * {}
Then when you inject jquery use that to close off the initial wrapping div before your content and to wrap any following content in the another wrapping div.
Issues:
Only possible if you are injecting
other site content onto your own
site.
This could get complicated
depending on where you are injecting
html.
The other option is to load a resetting stylesheet that targets your injected html specifically. In this case only your injected html would be wrapped but you'd need a css file that reset all attributes for all tags to their default before you add your own styles. No real issues here, just not very elegant...
Another way would be to use an element that doesn't inherit stylesheet like an iframe, but that comes with its own issues...
i have seen on different plugins that they put the code inside a iframe and they use JS to interact with the rest of the page, so you can not change the css inside.
Also i have seen that when injecting html code,people sets the style of the plugin content using the "style" attribute inside the tags so the browser will give priority to the css inside the style attribute and not the css file. The idea is to override the css,usually with the "!important" clause. But you might have some problems on different browsers
EDIT i forgot to say that my answer is on the case that you inject the code on someone's else page where you cannot control directly the css