How to set font weight to bold?


#1

Hello guys,

I want to know how to set font weight of any font as bold .

I am new to Atom text editor . I have been using Sublime Text 2 .

I opened the config.json file, but under the editor class , I only found fontSize and fontFamily

I am using Atom text editor on Ubuntu 14.04 64 bit . Thank You .


#2

In styles.less:

.editor {
     font-weight: bold;
}

#3

Thanks @postcasio for the reply. Is this style.less file the only file that we configure or is their a default file as well where all the attributes are given ??

Can you please tell me where do you find this setting since I am new to Atom I would like to read about how to use it effectively .


#4

There are any number of files that could be edited to achieve this. The way things are set up, at a high level, is that you have:

  1. A UI theme (such as Atom Dark UI)
  2. A Syntax theme (such as Atom Dark Syntax)
  3. Your personal styles.less or styles.css file

You could create your own UI or Syntax themes with this addition, or you could do as @postcasio suggested and edit your styles.less file … which is by far the simplest way to achieve what you want and would work no matter what UI theme or Syntax theme you choose in the future.

For example, I think that italicizing comments is really lame. But some people like it and put it in their Syntax themes. So rather than forking every Syntax theme I decide to try out to un-italicize the comments, I just put this in my styles.less:

.editor {
  .comment {
    font-style: normal;
  }
}

This way, no matter what Syntax theme I use, my comments are always un-italicized.


#5

Thanks @leedohm for the reply . My question is that how do you know that there is attribute named comment and inside that font-style ?? Is there any official Atom website where these properties and values are mentioned ??


#6

The font-style part is easy. That’s a standard CSS attribute (LESS is just a thin layer on top of CSS). All of Atom is styled using LESS/CSS.

As far as the .editor.comment part goes, no there is no official Atom website containing documentation of these attributes at this time. But you can discover these things by loading Atom in Developer mode (by executing atom --dev at the command line) and right-clicking on things and selecting “Inspect Element”. This is just like you would discover these things about a web page in your browser … because Atom is built on web technologies.


#7

@leedohm That’s really impressive !! I Who needs a Documentation when we can inspect elements of the software on our own :smiley:

Thanks for the help man.


#8

You’re very welcome. I’m glad I could help! :grinning:


#9

atom 0.177
solarized-dark-{ui,syntax} theme

It looks like this is not working anymore. Could you still override theme package this way? I have exact same line in ‘style.less’.

.editor {
  .comment {
    font-style: normal;
  }
}

#10

You can find the way to fix it by searching for Shadow DOM on the forum. The shift to the Shadow DOM has required changes to stylesheets:

Specifically, you would want to change your example to:

.editor, atom-text-editor::shadow {
  .comment {
    font-style: normal;
  }
}

#11

Thanks, I’ll check out.


#12

Hi leedohm:

When I did this:
… right-clicking on things and selecting “Inspect Element”.

The element source code window hs very tiny fonts.
I already setup up desired font size using hidpi package for Linux Mint.
How do I adjust the font in the element source code window?

Here is a screenshot, for relative comparison.
the inspect element source code window is on the right.


#13

Theming of the Chromium developer tools was discussed here:


#14

Thanks @leedohm i had made an easy to do step by step tutorial there.


#15
.editor .comment,
atom-text-editor.editor .syntax--comment {
  font-style: normal;
}