2

I want to change the font of code block, and for this purpose I'm using Tampermonkey that loads javascript ( written by you ) every time a website loads.

Now, I'm changing the font through the following way:

var code = document.getElementsByTagName("code"); // through developer tools, I came to know that the code we see on the screen in enclosed in code tag. 

code[0].style.fontFamily = "Menlo"; // the default font is `Consolas`

It works fine when I view questions on stackoverflow.com, but when I try to edit a question, it doesn't give me preview as in the following picture:

enter image description here

So how can I come up with a solution?

2
  • 2
    Wrong place. its a question for SuperUser...
    – toesslab
    May 6, 2014 at 4:47
  • Since, it involves a bit of programming guide, I didn't post it on meta. As you guys are confused over it, I was so too. However, I've flagged this question for a moderator's attention to move it on a (more) related site.
    – Arslan Ali
    May 6, 2014 at 4:49

1 Answer 1

3

If you are prepared to add another extension, using Stylish would make this easier. It injects CSS into matching pages, rather than injecting JavaScript with which you modify styles.

Then the CSS:

code {
  font-family: Menlo !important;
}

should be all you need.

Even using Tampermonkey the CSS approach will be easier: create an additional <style> element with the above CSS (I would keep the !important to save having to have a more specific selector to achieve sufficient priority in the CSS cascade.) This can be made easier with Tampmermonkey's support of GM_ functions (it is a port of Grasemonkey): GM_addStyle, thus your script would be simply:

GM_addStyle("code { font-family: Menlo !important; }");
3
  • Wrote this. Same problem. When I edit others' questions, the preview disappears. And one more problem, "Tags" in Tag Area are shown like pure text, no blue background and cross icon with them. :(
    – Arslan Ali
    May 6, 2014 at 7:46
  • @ArslanAli Which approach (I list three) did you try? In any case you'll need to use Chromes developer tools to debug the application of the style (setting a obvious style, eg. color: red !important;) can be helpful to seeing where it is being applied. NB. if using your own DOM manipulation code it is very easy to modify too many elements. Finally: use those developer tools to see what HTML structure is used in the preview: you will likely need multiple selectors.
    – Richard
    May 6, 2014 at 9:25
  • I've used each of your technique but the same problem occurs.
    – Arslan Ali
    May 6, 2014 at 9:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .