I am looking for a ressource where I can download CSS styles suitable for Rstudio/knitr markdown output?
The default look of the default CSS-style is fine, but I would like to find a CSS style where the content is positioned in the middle of the screen.
something like this (ignore content, colors, sidebar etc):
http://www.barackobama.com/news/
not like this (which is similar to the default):
http://stat.ethz.ch/R-manual/R-patched/library/stats/html/Normal.html
I don't really know CSS so I can't do it myself. I have tried to change the margin in the default CSS style from 0px to 200 px:
body, td {
font-family: sans-serif;
background-color: white;
font-size: 16px;
margin: 200px;
}
The problem with this "solution" is that it only works when the browser window is maximized, and pdf printed from the browser are too narrow also.
edit: This is good:
https://gist.github.com/andyferra/2554919
edit2: The preview version of Rstudio ( RStudio 0.98.932 - Windows XP/Vista/7/8) has a nice default CSS. Get it here: http://www.rstudio.com/products/rstudio/download/preview/
edit3: The newest version of Rstudio now includes some very nice CSS-styles to choose from :) http://www.rstudio.com/products/rstudio/download/
Not just a CSS resource, but you can take a look at the knitrBootstrap project, which provides a way to convert Rmarkdown to HTML styled with the bootstrap framework, including a CSS style chooser and some fancy javascript add-ons :
https://github.com/jimhester/knitrBootstrap
Related
In the current version of WordPress (4.6.1) using the code inspector reveals that the inline style for the image captions is:
<dd class="wp-caption-dd">Photo Caption Text</dd>
However, using ".wp-caption-dd" in editor-style.css has no affect - even with !important. How can I affect the class in the editor to create the same look in the editor that is live?
Please note: I am only talking about the editor ".wp-caption-text" is the correct class for live coding of the caption.
Charles
Using Chrome and Inspector I saw the .wp-caption-dd, and just putting this in your styles should do.
It should probably be more restrictive (inside the dd specifically), but this should get you started.
/* photo caption inside the Visual Editor */
.wp-caption-dd
{
font-size: 70%;
text-align: right;
font-family: Trebuchet,"Trebuchet MS",Helvetica,Geneva,Helv;
}
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 include a code block in a presentation I am preparing with Restructured Text. But the font used in the code block is huge and it can not fit inside resulting code box:
How can I reduce the font size used in code blocks?
Set the fontSize property of the code style in your style file.
e.g.
code:
parent: literal
fontSize: 10
Some of the builtin themes (alabaster) accept usage of custom.css.
Create _static/custom.css and add the following to adjust the code-block font-size:
_static/custom.css:
.highlight { background: #f8f8f8; font-size: x-small;}
You need a layout.html in a dir mysources/_templates and in your mysources/conf.py you need a declaration templates_path = ['_templates'].
In layout.html add a declaration
div.highlight {
font-size : 0.8em; /* or another value you prefer */
}
This works for me because I use the html_theme sphinxdoc. Maybe in other themes the declarations differ. If so you must find out the declaration by a html debugger like Inspektor in Firefox or Developer Tools in Chrome or DOM Explorer in IE.
Trying to print my views to PDF and I am getting pdfs rendered as for mobile device. Basically, I think smallest screen is detected and css styles for mobile are used. Is there a way to fix this?
I tried to change format size and make it really big, tried to use landscape orientation, but content would just scale up and it would still show with mobile styles.
I am thinking to render a partial view to pdf and have custom css file just for pdf exports, but that seems like a lot of not necessary work
Any ideas?
Thanks
What you could be doing is using the print media type in your stylesheet. It would look something like this:
#media print {
p {
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
color: red;
}
}
Maybe you already use this media type and put it in your mobile styling? Might want to put it above any responsive input and see how that works out?
When I save a document in CKEditor (CKEditor 3.5.2), the saved HTML is right. But when I open that HTML again for editing (putting the HTML in a textarea and then load CKEditor), CKEditor parses the style setting wrong.
If I have a code that looks like this:
<div style="font-family: arial; font-size: 11px; background: green;">Hello</div>
And then open it with CKEditor, it looks like this:
<div style="font-family: arial font-size: 11px background: green">Hello</div>
The ; has disappeared. It does not matter which style settings I use, the semicolon disappears in all cases.
It does not matter what element the style setting is in. The same problem appears in img, div, a, span... and so on.
What shall I do? I am about 100% sure it is ckeditor that is the problem. I open the HTML right from the database. But what else than ckeditor could it be?
I do not use any CMS site, just pure php.
might be some configuration issues.
reinstall properly because i am also using ckeditor it's works fine in all browser and support all kind of html or css tags