Related:
Code styling for black and white documents
I want to use a simple custom CSS for code highlighting in knitted .Rnw/.tex/.pdf documents. However only a select few rules seem to be implemented upon knitting.
For the moment I am focusing on colorless highlighting, consequently I would like to manipulate rules such as text-decoration, font-weight, font-style and - for grays - color; cf. the theme "print" here. But, even with the simplest examples, I can only get a certain few to be implemented, e.g., color and font-style; specifically, I've found that font-weight does nothing, nor does text-decoration. E.g.:
.background {
color:#F6F6F6;
}
...
.kwc {/* e.g., parameters */
font-weight:100;
color:#8C8C8C;
}
.kwd {/* e.g., methods */
text-decoration:underline;
}
...
.com {/* comments */
font-style:italic;
}
...
(The sets of three dots indicate that my CSS file contains more than the example above.)
With the above in my style sheet, in the output PDF the code block background and parameters are colored accordingly and the comments italicized, however the parameters do not have a font weight of 100 nor are methods underlined.
Is there some sort of limitation as to the rules custom knitr themes may use? What else may be the problem here?
N.B.:
Mac 10.9.3
knitr v1.6.3.
I have the CSS in the same directory as my Rnw document and I pass it to knitr in a chunk at the beginning of my document via:
theme <- knit_theme$get('./my_css.css')
knit_theme$set(theme)
Related
I am trying to create an R-Markdown document and for some reason on all headers of the document denoted by ### etc..., when I knit to html and hover over each word, an underlined hashtag appears. Is there a way to get rid of this in the output? As an example, below is the standards cars summary.
I tested on another machine and had no issues with the output. Could I be missing a certain package? I'm currently using Rstudio version 1.3.1093 and R version 4.0.3 on the PC that is not showing the correct output.
Thank you in advance
This is a new feature of the latest release of rmarkdown you can disable it by adding anchor_sections: FALSE to the yaml header, it's documented in the release notes
One solution is to override the CSS that is putting that # in there in the first place. Doing this means there will only be a cosmetic change, so no unintended side-effects.
Place a set of style tags after the YAML header and set the content of the a.anchor-section::before element to ''.
<style>
a.anchor-section::before {
content: '';
}
</style>
If you use right-click your output html document and click inspect element you can dive into the CSS that controls each element - the default in this case is a.anchor-section::before {content: '#';}.
You probably also want to add this too
a.anchor-section {
margin-left: 0;
}
I have a set of Jupyter notebooks I am developing using iPython as the underlying Kernel.
I want to style the output to make it stand out from the surrounding text, what is the best way to style my output?
You can place a custom.css file in the ~/.jupyter/custom folder which will affect the css.
To style the output, you'll need to use a selector like so:
.output_subarea * {
background-color: red;
}
Depending on what you want to style. The * matches all elements and the space between .output_subarea and * indicates we want to select the decendents of .output_subarea. !important indicates that we want to override any existing styles, you may need to use this. If it doesn't seem to be working, try adding on !important like so:
.output_subarea * {
background-color: red !important;
}
There's a couple of output selectors, you should play around with them until you find the one you want to use.
.output selects the whole output div, .output_area selects any output areas. Usually styling .output or .output_area will do similar things.
.output_subarea specifically only targets areas of actual outputs (i.e. it will exclude the prompt)
Play around with it, have a look at the DOM inspector using your browser to find the classes of the parts of the page you want to affec
I am using the Firefox Developer Edition theme on MacOS to reduce eye strain while programming.
However, results while typing in the location bar still pop up bright white.
Does anyone know of CSS to have these results use a dark background and light text?
Generally, if you are looking for an add-on which will change this, then a theme would be appropriate. At least one of the themes I use does style the URL Bar's auto-complete results. An extension could also change the styling, if desired. However, given that you are not wanting a completely different theme, just a minor modification to the Developer Edition theme, it is easier to do this yourself by applying CSS to the profile's chrome by placing the CSS in userChrome.css.
To do it for yourself, you need to determine the appropriate elements to style. As is often the case, the add-ons DOM Inspector combined with Element Inspector are quite useful in determining the appropriate elements to style. With those add-ons installed, opening the auto-complete drop-down and Shift-Right-Click results in seeing the DOM for what we want to change:
Thus, we can put the following in the profile's userChrome.css, which needs to be located in the [profile directory]/chrome directory:
/*
* Edit this file and copy it as userChrome.css into your
* profile-directory/chrome/
*/
/*
* This file can be used to customize the look of Mozilla's user interface
* You should consider using !important on rules which you want to
* override default settings.
*/
/*
* Do not remove the #namespace line -- it's required for correct functioning
*/
/* set default namespace to XUL */
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#PopupAutoCompleteRichResult {
background-color:black !important;
-moz-border-top-colors:black !important;
-moz-border-top-colors:black !important;
-moz-border-left-colors:black !important;
-moz-border-right-colors:black !important;
}
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
background-color:black !important;
}
#PopupAutoCompleteRichResult .ac-title-text,
#PopupAutoCompleteRichResult .ac-tags-text,
/*#PopupAutoCompleteRichResult .ac-url-text,*/
#PopupAutoCompleteRichResult .ac-action-text {
color:white;
}
This results in the URL Bar auto-complete having a black background with white text:
Ok, after doing quite a bit of Internet digging, I found probably the only solution, which also isn't really one.
As of writing this, there is no such Plugin/Add-on/Mod for changing the style of the search bar.
However, you could change the source code of Firefox itself. To do so start here: Mozilla Dev GUide. Its mainly written in C & C++. I mean, there really is no option for that.
There are settings, somewhere deep down in Firefox, where you can actually get such an add-on, I couldn't find it tho.
You can turn off the search bar completely, so you get your results on google, after hitting enter.
A thrid option would be, to try another browser. Just check, which browser allows you to style the search bar and apply all the other Dark Themes to that browser later on.
Hope, I didn't make it worse :/
How can I add CSS to github's markdown language?
I've been able to do so by using the style property inside html tags, like:
<p style="text-align: center;">This is some random text</p>
But if I move the css to the beginning, like:
<style>
p {
text-align: center;
}
</style>
<p>This is some random text</p>
Github doesn't recognize it, and just writes to the screen the css code.
I'm using Atom, and the package Markdown Preview actually recognizes this correctly, even though on the remote repository it shows wrong. And so does the Google Chrome extension Markdown Preview Plus.
Is there a way to do this? Writing css within html tags just feels plain wrong.
After GitHub converts Markdown to HTML,
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.
style tags are not included in GitHub's whitelist, so they are removed. I'm actually surprised that inline style attributes work; they don't seem to be included in the whitelist, either, and are explicitly mentioned in the previous paragraph.
In any case, GitHub does not permit arbitrary HTML to be included in Markdown.
Here is how you can accomplish what you're looking for. As the other answer states, Github doesn't support this syntax, but if you pop this Markdown into another preview tool you'll see that the bullets are removed from this list.
|Signal|Description|
|---|---|
|DOP|Horizontal Dilution of precision|
|FIX|GPS Fix Quality indicator: <ul style="list-style-type:none;"><li>0 - fix not available</li><li>1 - GPS fix</li></ul>|
Signal
Description
DOP
Horizontal Dilution of precision
FIX
GPS Fix Quality indicator: 0 - fix not available1 - GPS fix
You can trivially override what CSS Github uses by supplying it with your own style.css file, nested as ./assets/css/style.css (which is stylesheet URL that gets pointed to in the HTML source code that Github build off of your markdown).
Note that if you want to just "add" any CSS, you'll want to copy Github's CSS first, so you can create a file with the same content after which you place your own rules. You can find this on any view-source:https://username.github.io/repo-name/assets/css/style.css with the obvious replacements for username and repo-name.
E.g.
/* CSS as copied from github's own stylesheet here, which is all one line anyway */
...
/* And then your own CSS */
/* remove the repo name as some kind of weird super-title */
h1:first-child { display: none }
/* and better emphasise the _real_ title */
h1:nth-child(2) { font-size: 3em; }
/* let's also give images a subtle border */
img { border: 1px solid #DDD; }
I would like to change the colour of comments in the Atom editor. From a bit of googling, I found I can put the following in my .atom/styles.less file:
atom-text-editor::shadow .comment {
color: #ffffaa;
}
That's great - now I have bright yellow comments that demand to be noticed rather than fading into the background. The trouble is that it now looks like the below
As you can see, the text colour of the comments has changed, but the comment delimiters and links within comments remain in the default almost-invisible-grey, which looks a bit silly.
My questions are (1) how can I change the colour of these items, and more importantly (2) where can I look up how to change the colour of these items?
Please note that I am not a web programmer and know nothing of CSS or any related technologies. I am therefore looking for a fairly step-by-step solution, in contrast to solutions found, for example, in the answers to this question, which assume a substantial amount of background in the inner workings of this stuff.
Using 1.14.4:
// This styles comment text
atom-text-editor .syntax--comment {
color: #53FFA1;
}
// This styles comment punctuation (i.e. //, and /*...*/)
.syntax--punctuation.syntax--definition.syntax--comment {
color: #008C3F;
}
To find out the CSS classes of any element you want to style, follow these steps in the editor:
Use your cursor to highlight the element you want to inspect. I'm following your example of a double slash (i.e. a comment) here.
Press Ctrl+Alt+Shift+P (or Cmd+Alt+P on OS X). A pop-up will tell you all classes of that element. Usually, it's the last line of that notification that is of interest for us. For //, it is comment.line.double-slash.js.
Disregard the last dot and everything following it, since keeping it would apply your changes to a specific file type only (js in this case). Now prepend a dot. The remaining string is the element we want to style: .comment.line.double-slash.
Open the .atom/styles.less by opening the command pallette (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on OSX) and searching for "Application: Open Your Stylesheet".
Append these lines to .atom/styles.less, if not already present:
atom-text-editor::shadow {
// custom comment styling goes here
}
Inside the brackets you can place CSS/LESS code for any element you want to customize.
atom-text-editor::shadow {
.comment.line.double-slash {
color: #ffffaa;
}
}
Additional advice: you can enumerate element identifiers as a comma-and-space-separated list, if the same changes should apply to them. So if you want to make links the same color as comments, there are two possibilities:
.comment.line.double-slash {
color: #ffffaa;
}
.markup.underline.link.hyperlink { // I removed the '.https' to apply this to all protocols
color: #ffffaa;
}
or
.comment.line.double-slash, .markup.underline.link.hyperlink {
color: #ffffaa;
}
With long class names as they are used here, I'd prefer the first option for readability. But that's up to your choice.
The syntax is changed in 1.14.
Now, you need to use this for changing the comment color
atom-text-editor .syntax--comment {
color: #228B22;
}
An update to #Hexaholic's now out-dated answer:
Find the CSS class of the element you want to style
Launch the Developer Tools window using Ctrl+Shift+i (Windows; command: window:toggle-dev-tools)
Activate the Element Inspector (Ctrl+Shift+C from within the developer tools window, or click the cursor icon)
Hover over the element you wish to style
Identify the appropriate style name: each style name begins with a dot and proceeds to the next dot. This example applies the styles .syntax--comment, .syntax--block and .syntax--bibtex.
Apply custom CSS
Open the custom stylesheet .atom/styles.less ("Application: Open Your Stylesheet" in the command finder (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P, OSX)
Enter the appropriate CSS. For example, to colour all comments:
atom-text-editor .syntax--comment {
color: #ffffaa;
}
Or to colour all comments also tagged as bibtex:
atom-text-editor .syntax--comment.syntax--bibtex {
color: #ffffaa;
}
As usual with CSS, more specific comments (as the latter) will override more general classes (as the former).
Further reading
Atom's guide to Further Customization