Markdown R - Embedded image as logo - html

I'm trying to put an image as logo, on the right hand side next to the title and want it to work embedded in a single HTML file, but I'm not succeeding (for instance, to share only the HTML file and not both the HTML file and the image).
Here is the code I have:
---
title: "Title"
header-includes: \usepackage{graphicx}
author: "Team"
date: "Date"
output:
html_document
---
<script>
$(document).ready(function() {
$head = $('#header');
$head.prepend('<img src="Image_I_Want.png\" style=\"float: right;width: 250px;\"/>')
});
</script>
<br>
## 1) Some nice title
Thank you in advance!

Here is the link to logo.jpg:
https://s-media-cache-ak0.pinimg.com/736x/a7/e8/fa/a7e8fa149fb23e4cbcfe9e8406b6b911.jpg
<script>
$(document).ready(function() {
$head = $('#header');
$head.prepend('<img src=\"logo.jpg\" style=\"float: right;width: 150px;\"/>')
});
</script>
---
title: "Title"
header-includes: \usepackage{graphicx}
author: "Team"
date: "Date"
output:
html_document
---

This is going to be hard to do using Markdown. Markdown trades simplicity for control. I don't know how it prints out the title where you want your logo to be.
Two possible alternatives:
Create the HTML using 'knit', then edit it manually.
Write an RHTML document just using pure HTML.
If you don't know HTML, use a WYSIWYG program (or find a web designer).
The HTML you want is going to be something like:
<h1>My company title</h1><img style='float:right;' src='myimage.png'>

Related

In RMarkdown, can a floating TOC be placed on the right side of page

When I add a floating Table of Contents to my R-Markdown document, it always is on the left side of the page (with the content to the right), like so:
---
title: "some title"
author: "me"
date: "3/2/2020"
output:
html_document:
toc: TRUE
toc_float: TRUE
---
However, I'd like to move the floating TOC to the right side of the page. How can I accomplish this? The image below is what I'd like:
Insert the CSS chunk below (after YAML) and try increasing/decreasing the values of px (right and margin-left) for fine-tuning:
---
title: "some title"
author: "me"
date: "3/2/2020"
output:
html_document:
toc: TRUE
toc_float: TRUE
---
```{css toc-content, echo = FALSE}
#TOC {
right: 270px;
margin: 20px 0px 25px 0px;
}
.main-container {
margin-left: 200px;
}
```
The R Hmisc package hidingTOC function does this, allows for changing some of the characteristics of the display, and provides buttons labeled 1 2 3 that the reader can click to show the table of contents to level 1, level 1-2, level 1-3. No special yaml is needed; just have require(Hmisc) in your setup chunk and have the inline text sometime after that chunk: r hidingTOC(buttonLabel="Outline") or just use the default. You can also just say r Hmisc::hidingTOC() as the inline R code. Don't need to put these commands in a chunk; they render HTML which is automatically included in the document.

How to align left html_document rendered by rmarkdown?

Since I am not familiar with css I was wondering if there is a simple way to "tell" my rmarkdown page to left align when rendering an HTML-page?
Something like this:
---
title: "My html-page"
output:
html_document:
body_placement: left
---
Maybe something like this:
---
title: "My html-page"
output: html_document
---
<style>
body {
position: absolute;
left: 0px;}
</style>
If you'd actually like some basic styles (i.e. not my theme:null suggestion), grab Skeleton and put normalize.css & skeleton.css in the same directory as your Rmd file. Then you can do:
---
title: "Title"
output:
html_document:
theme: null
css:
- normalize.css
- skeleton.css
keep_md: true
md_document:
variant: markdown_github
---
One
Two
```{r}
print("three")
```
which will result in:
You can add a third - my.css if you want to customize it a bit more.

HTML is shown as plain text in dojo widget

I have a dojo widget with generated content, text message in my case.
Message text is a formatted text with <b>, <i> etc. tags. When I put it to my widget via ${messageText} it is shown as it is a plain text.
How to make my widget parse all these tags to DOM nodes?
upd
.jsp fragment:
<script>
(new MyWidget({
text: "<b>message</b>"
}).placeAt(dojo.byId("placeWidgetHere");
</script>
<div id="placeWidgetHere"></div>
widget .html template:
<div>${text}</div>
Instead of using substitution variables (which is not recommended), you can use an attribute map on your custom widget.
<div>
<span data-dojo-attach-point="messageTextNode"></span>
</div>
declare('MyWidget'], [TemplatedMixin], {
template: ...,
messageText: '',
_setMessageTextAttr: { node: "messageTextNode", type: "innerHTML" },
});
new MyWidget({
messageText: "<b>message</b>"
}, "placeWidgetHere");
The problem is that messageText has "<" and ">" symbols converted to "<" and ">" respectively.
I added .replace(/</g, "<").replace(/>/g, ">") to messageText and that began to work properly.
Thanks to everyone who tried to help me.

caption in the html output of knitr

When knitting the following Rmd file
```{r, fig.cap="mycaption"}
plot(0,0,axes=FALSE,xlab=NA,ylab=NA)
```
with the "Knit HTML" button of RStudio then the caption does not appear in the html output file. Indeed the html source code corresponding to the figure is:
<p><img src="data:image/png;base64,..." alt="mycaption"/></p>
To see the caption it should be for instance:
<p><img src="data:image/png;base64,..." alt="mycaption"/><p class="caption">mycaption</p></p>
How to easily get an html output with visible captions ?
I usually just use results='asis' in the chunk options and include raw html in the chunk, wrapping it in cat() but as Yihui mentioned you can create your own hook:
```{r}
knit_hooks$set(htmlcap = function(before, options, envir) {
if(!before) {
paste('<p class="caption">',options$htmlcap,"</p>",sep="")
}
})
```
```{r, htmlcap="Hello Dolly"}
library(ggplot2)
ggplot(diamonds,aes(price,carat)) + geom_point()
```

HTML : How to retain formatting in textarea?

I am using HTML textarea for user to input some data and save that to App Engine's model
The problem is that when I retrieve the content it is just text and all formatting is gone
The reason is because in textarea there is no formatting that we can make
Question:
is there any way to retain the format that user provides?
is there any other element(other than textarea), that i'll have to use?(which one?)
P.S I am very new to area of web development and working on my first project
Thank you
What you want is a Rich Text Editor. The standard HTML <textarea> tag only accepts plain text (even if the text is or includes HTML markup). There are a lot of example out there (including some listed on the page linked) but I would highly recommend using a prepackaged one for this. Coding your own is fairly complicated for people who are new, and even for a lot who have some experience. Both TinyMCE and CKEditor are very common ones, but there are many others as well.
A text box is like wordpad, you cant format it, if you paste in from word or any other formatted text it will wipe all the formatting and you will be left with just the text.
You need add an editor to the text areas, I use TinyMCE, but there are many other out there too.
To implement you need to have all the source (which you can get from TinyMCE) in your web directory.
Here's an example which you can try:
Add this the the head section of your page:
<script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode: "exact",
elements : "elm1",
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,"
+ "justifyleft,justifycenter,justifyright,justifyfull,formatselect,"
+ "bullist,numlist,outdent,indent",
theme_advanced_buttons2 : "link,unlink,anchor,image,separator,"
+"undo,redo,cleanup,code,separator,sub,sup,charmap",
theme_advanced_buttons3 : "",
height:"350px",
width:"600px"
});
</script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Skin options
skin : "o2k7",
skin_variant : "silver",
// Example content CSS (should be your site CSS)
content_css : "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
Then to call the textarea:
<textarea name="content" style="width:100%">YOUR TEXT HERE</textarea>
NB: You need to download and have in your directory the js files for <script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
Hope this helps!
This won't solve the case when you want somebody to be able to format their text (e.g. with WYSIWYG bold buttons etc.), but if you want to be able to accept pre-formatted HTML (e.g. copy and paste from other HTML source such as a webpage), then you can do this:
<form ...>
<label>Paste your HTML in the box below</label>
<textarea style='display:none' id='foo'></textarea>
<div id='htmlsource' contenteditable style='border:solid 1px black;padding:1em;width:100%;min-height:2em;' ></div>
<input type='submit' />
</form>
<script>
jQuery(function(){
jQuery('form').submit( function(e) {
jQuery('textarea').val( jQuery('#htmlsource').html() );
});
});
</script>
This uses a contenteditable div element which you can format to look like an input box and will accept pasted HTML, and a hidden textarea#foo which will be populated with the pasted HTML just before the form is submitted.
Note that this is not an accessible solution as it stands.
Depending on your goal for the programm it could already be sufficient to just add "pre" tags left and right to the input of your textarea. for example if your code submits to a form whatever is inside a textarea and than echos it in the target File this would already work.
> File 1:
>
> <form action="Output.php" methode=post>
> <textarea name="Input"></textarea>
> </form>
>
> File Output.php
>
> $UserInput = $_POST["Input"];
> $UserInput = "<pre>" . $UserInput . "</pre>"
> echo $UserInput
this already will retain all Enters for example that where used in the original user input and echo them correctly
If you retrieve the content from the App Engine Saving the Content with the pre tags added already in most cases does the trick