New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Markdown emphasis not working properly with io2012 framework #224

Open
jknowles opened this Issue Jun 13, 2013 · 21 comments

Comments

Projects
None yet
4 participants
@jknowles

When I try to make a slide deck that uses markdown commands for emphasis, the rendered slides do not reflect these changes when rendered in the io2012 framework.

Am I missing something very obvious? Below is my Rmd file demonstrating this, and my sessionInfo().


---
title       : My MWE for Slidify
subtitle    : Emphasis does not work in lists
author      : Jared Knowles
job         : Research Analyst, Wisconsin DPI
framework   : io2012        # {io2012, html5slides, shower, dzslides, ...}
highlighter : prettify  # {highlight.js, prettify, highlight}
hitheme     : hemisu-light      # 
widgets     : []            # {mathjax, quiz, bootstrap}
mode        : standalone # {standalone, draft}

---

#```{r setup, include=FALSE}
# set global chunk options
opts_chunk$set(fig.path='figure/slides-', cache.path='cache/slides-', cache=TRUE,
               comment=NA)
# upload images automatically
#opts_knit$set(upload.fun = imgur_upload)
#```

## This works

Can this **ever** work?

**I should be bold**

*I should be italic*

__I should be bold__

_I should be italic_


---

## Lists

- **I should be bold**
- *I should be italic*
- __I should be bold__
- _I should be italic_

---

## Incremental lists

> - **I should be bold**
> - *I should be italic*
> - __I should be bold__
> - _I should be italic_
R version 2.15.2 (2012-10-26)
Platform: i386-w64-mingw32/i386 (32-bit)


attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] slidifyLibraries_0.2.11 slidify_0.3.51          devtools_1.1           
[4] eeptools_0.2            ggplot2_0.9.3.1         knitr_1.2.9            
[7] markdown_0.5.5          whisker_0.3-2          

loaded via a namespace (and not attached):
 [1] codetools_0.2-8    colorspace_1.2-2   dichromat_2.0-0    digest_0.6.3      
 [5] evaluate_0.4.3     formatR_0.7        grid_2.15.2        gtable_0.1.2      
 [9] httr_0.2           labeling_0.1       MASS_7.3-23        memoise_0.1       
[13] munsell_0.4        parallel_2.15.1    plyr_1.8           proto_0.3-10      
[17] RColorBrewer_1.0-5 RCurl_1.95-4.1     reshape2_1.2.2     scales_0.2.3      
[21] stringr_0.6.2      tools_2.15.1       yaml_2.1.7  
@ramnathv

This comment has been minimized.

Show comment
Hide comment
@ramnathv

ramnathv Jun 13, 2013

Owner

I am aware of this. It is because io2012 uses reset.css to reset all the styles and does not redefine some of them. Easiest fix would be to add this css snippet to your deck

<style>
em {
  font-style: italic
}
</style>

I will leave this issue open as a reminder for me to add this directly to the io2012 deck, so that people are not taken by surprise.

Owner

ramnathv commented Jun 13, 2013

I am aware of this. It is because io2012 uses reset.css to reset all the styles and does not redefine some of them. Easiest fix would be to add this css snippet to your deck

<style>
em {
  font-style: italic
}
</style>

I will leave this issue open as a reminder for me to add this directly to the io2012 deck, so that people are not taken by surprise.

@jknowles

This comment has been minimized.

Show comment
Hide comment
@jknowles

jknowles Jun 13, 2013

Thanks so much for the quick reply.

At this time is it possible to somehow include both italic and bold? e.g.
is there a tag for both the *text* and the **text** that I can add to
the style tag to enable both of these?

No problem if not! This is already really helpful!

On Thu, Jun 13, 2013 at 10:20 AM, Ramnath Vaidyanathan <
notifications@github.com> wrote:

I am aware of this. It is because io2012 uses reset.css to reset all the
styles and does not redefine some of them. Easiest fix would be to add this
css snippet to your deck

<style>em { font-style: italic}</style>

I will leave this issue open as a reminder for me to add this directly to
the io2012 deck, so that people are not taken by surprise.


Reply to this email directly or view it on GitHubhttps://github.com/ramnathv/slidify/issues/224#issuecomment-19398775
.

Thanks so much for the quick reply.

At this time is it possible to somehow include both italic and bold? e.g.
is there a tag for both the *text* and the **text** that I can add to
the style tag to enable both of these?

No problem if not! This is already really helpful!

On Thu, Jun 13, 2013 at 10:20 AM, Ramnath Vaidyanathan <
notifications@github.com> wrote:

I am aware of this. It is because io2012 uses reset.css to reset all the
styles and does not redefine some of them. Easiest fix would be to add this
css snippet to your deck

<style>em { font-style: italic}</style>

I will leave this issue open as a reminder for me to add this directly to
the io2012 deck, so that people are not taken by surprise.


Reply to this email directly or view it on GitHubhttps://github.com/ramnathv/slidify/issues/224#issuecomment-19398775
.

@ramnathv

This comment has been minimized.

Show comment
Hide comment
@ramnathv

ramnathv Jun 13, 2013

Owner

The markdown package converts **bold** into <strong>bold</strong>. So you can style it as

<style>
strong {
  font-weight: bold;
}
</style>

Let me know if it works.

Owner

ramnathv commented Jun 13, 2013

The markdown package converts **bold** into <strong>bold</strong>. So you can style it as

<style>
strong {
  font-weight: bold;
}
</style>

Let me know if it works.

@jknowles

This comment has been minimized.

Show comment
Hide comment
@jknowles

jknowles Jun 13, 2013

Yeah, that fixes it! The default bold effect in the io2012 stylesheet is
pretty subtle, but this way I can adjust it!

Thanks so much for the quick reply, this is an easy workaround for now.

On Thu, Jun 13, 2013 at 10:33 AM, Ramnath Vaidyanathan <
notifications@github.com> wrote:

The markdown package converts bold into bold. So you
can style it as

<style>strong { font-weight: bold;}</style>

Let me know if it works.


Reply to this email directly or view it on GitHubhttps://github.com/ramnathv/slidify/issues/224#issuecomment-19399674
.

Yeah, that fixes it! The default bold effect in the io2012 stylesheet is
pretty subtle, but this way I can adjust it!

Thanks so much for the quick reply, this is an easy workaround for now.

On Thu, Jun 13, 2013 at 10:33 AM, Ramnath Vaidyanathan <
notifications@github.com> wrote:

The markdown package converts bold into bold. So you
can style it as

<style>strong { font-weight: bold;}</style>

Let me know if it works.


Reply to this email directly or view it on GitHubhttps://github.com/ramnathv/slidify/issues/224#issuecomment-19399674
.

@ramnathv

This comment has been minimized.

Show comment
Hide comment
@ramnathv

ramnathv Jun 13, 2013

Owner

Great. I also noticed that you run a lot of R Tutorials, and thought you might be interested in an experimental concept I have been working on. Take a look at this slide.

http://ramnathv.github.io/slidifyExamples/examples/probability/ILE.html#22

You will notice that the code in the text editor can be edited and run online. This slide makes use of OpenCPU servers to run R code. So any R package on OpenCPU can be used. There is also an offline version that uses Shiny instead of OpenCPU. The advantage of Shiny is that data persists across cells, just like in the R console and you have access to more packages and datasets on your local machine.

They syntax is extremely simple and uses regular knitr code chunks. If you are interested, I can work with you to convert one of your tutorials into an interactive one by adding the required markup. You can test it and I can tweak things based on feedback.

Let me know.

Owner

ramnathv commented Jun 13, 2013

Great. I also noticed that you run a lot of R Tutorials, and thought you might be interested in an experimental concept I have been working on. Take a look at this slide.

http://ramnathv.github.io/slidifyExamples/examples/probability/ILE.html#22

You will notice that the code in the text editor can be edited and run online. This slide makes use of OpenCPU servers to run R code. So any R package on OpenCPU can be used. There is also an offline version that uses Shiny instead of OpenCPU. The advantage of Shiny is that data persists across cells, just like in the R console and you have access to more packages and datasets on your local machine.

They syntax is extremely simple and uses regular knitr code chunks. If you are interested, I can work with you to convert one of your tutorials into an interactive one by adding the required markup. You can test it and I can tweak things based on feedback.

Let me know.

@jknowles

This comment has been minimized.

Show comment
Hide comment
@jknowles

jknowles Jun 13, 2013

Whoa! That is like magic!

The Rmd file makes it look incredibly simple to implement. I have been
working on converting all of my R Bootcamp materials over to slidify to
give them a nice aesthetic update, but it seems like that task is more
urgent because this would be a huge upgrade in functionality.

The Shiny extension seems like the most use because of the advantages you
state. I would love to collaborate with you on this -- it seems like you
have quite a bit of experience in R tutorials as well!

Thanks!

On Thu, Jun 13, 2013 at 10:40 AM, Ramnath Vaidyanathan <
notifications@github.com> wrote:

Great. I also noticed that you run a lot of R Tutorials, and thought you
might be interested in an experimental concept I have been working on. Take
a look at this slide.

http://ramnathv.github.io/slidifyExamples/examples/probability/ILE.html#22

You will notice that the code in the text editor can be edited and run
online. This slide makes use of OpenCPU servers to run R code. So any R
package on OpenCPU can be used. There is also an offline version that uses
Shiny instead of OpenCPU. The advantage of Shiny is that data persists
across cells, just like in the R console and you have access to more
packages and datasets on your local machine.

They syntax is extremely simple and uses regular knitr code chunks. If you
are interested, I can work with you to convert one of your tutorials into
an interactive one by adding the required markup. You can test it and I can
tweak things based on feedback.

Let me know.


Reply to this email directly or view it on GitHubhttps://github.com/ramnathv/slidify/issues/224#issuecomment-19400164
.

Whoa! That is like magic!

The Rmd file makes it look incredibly simple to implement. I have been
working on converting all of my R Bootcamp materials over to slidify to
give them a nice aesthetic update, but it seems like that task is more
urgent because this would be a huge upgrade in functionality.

The Shiny extension seems like the most use because of the advantages you
state. I would love to collaborate with you on this -- it seems like you
have quite a bit of experience in R tutorials as well!

Thanks!

On Thu, Jun 13, 2013 at 10:40 AM, Ramnath Vaidyanathan <
notifications@github.com> wrote:

Great. I also noticed that you run a lot of R Tutorials, and thought you
might be interested in an experimental concept I have been working on. Take
a look at this slide.

http://ramnathv.github.io/slidifyExamples/examples/probability/ILE.html#22

You will notice that the code in the text editor can be edited and run
online. This slide makes use of OpenCPU servers to run R code. So any R
package on OpenCPU can be used. There is also an offline version that uses
Shiny instead of OpenCPU. The advantage of Shiny is that data persists
across cells, just like in the R console and you have access to more
packages and datasets on your local machine.

They syntax is extremely simple and uses regular knitr code chunks. If you
are interested, I can work with you to convert one of your tutorials into
an interactive one by adding the required markup. You can test it and I can
tweak things based on feedback.

Let me know.


Reply to this email directly or view it on GitHubhttps://github.com/ramnathv/slidify/issues/224#issuecomment-19400164
.

@ramnathv

This comment has been minimized.

Show comment
Hide comment
@ramnathv

ramnathv Jun 13, 2013

Owner

Great. I have made significant changes to simplify the markup required for interactive slides. There are just a few glitches that I need to fix, after which you can use the same simple markup to create two versions of your slides. One for online use that hooks on to OpenCPU, and another for offline use that hooks on to Shiny.

I will send you a message once I have fixed the glitches. Meanwhile, if you have a tutorial in mind that you would like to make interactive, then it would be good if you created a separate repo for it. We can use it to collaborate on the interactive feature and once we nail it for one tutorial, you can go ahead and convert the rest !

Owner

ramnathv commented Jun 13, 2013

Great. I have made significant changes to simplify the markup required for interactive slides. There are just a few glitches that I need to fix, after which you can use the same simple markup to create two versions of your slides. One for online use that hooks on to OpenCPU, and another for offline use that hooks on to Shiny.

I will send you a message once I have fixed the glitches. Meanwhile, if you have a tutorial in mind that you would like to make interactive, then it would be good if you created a separate repo for it. We can use it to collaborate on the interactive feature and once we nail it for one tutorial, you can go ahead and convert the rest !

@ramnathv

This comment has been minimized.

Show comment
Hide comment
@ramnathv

ramnathv Jun 13, 2013

Owner

And for converting pandoc style slide decks to slidify, here are some utility functions that might be useful.

#15

Essentially, you only need to convert the metadata in the beginning to YAML front matter, and then add slide separators before every slide header title.

Owner

ramnathv commented Jun 13, 2013

And for converting pandoc style slide decks to slidify, here are some utility functions that might be useful.

#15

Essentially, you only need to convert the metadata in the beginning to YAML front matter, and then add slide separators before every slide header title.

@jknowles

This comment has been minimized.

Show comment
Hide comment
@jknowles

jknowles Jun 14, 2013

Great, I created the separate repo here: https://github.com/jknowles/Rbootcamp

It still needs some formatting fixes, but I think this will be a great demo because it does not require manipulating outside data so much. It would be a great thing to host online for folks to just get a flavor for what it is like to work in the R environment!

Thanks so much, looking forward to working on this with you!

Great, I created the separate repo here: https://github.com/jknowles/Rbootcamp

It still needs some formatting fixes, but I think this will be a great demo because it does not require manipulating outside data so much. It would be a great thing to host online for folks to just get a flavor for what it is like to work in the R environment!

Thanks so much, looking forward to working on this with you!

@ramnathv

This comment has been minimized.

Show comment
Hide comment
@ramnathv

ramnathv Jun 14, 2013

Owner

It looks great. Can you also create a smaller file with just one example where interactive editing of code would be a useful feature. I can then modify that file to show you the markup associated with interactivity (once I have cleaned up things at my end) and you could do the same with all your code chunks.

Does that make sense?

Owner

ramnathv commented Jun 14, 2013

It looks great. Can you also create a smaller file with just one example where interactive editing of code would be a useful feature. I can then modify that file to show you the markup associated with interactivity (once I have cleaned up things at my end) and you could do the same with all your code chunks.

Does that make sense?

@jknowles

This comment has been minimized.

Show comment
Hide comment
@jknowles

jknowles Jun 14, 2013

Great!

I created a file demo.Rmd with two chunks (1 with a plot, 1 without) to show examples on. They should be entirely self-sufficient, but 1 does require the installation of a specialty package used in the bootcamp. This is an important feature to make sure it works -- loading less common packages.

Let me know what to do next!

Great!

I created a file demo.Rmd with two chunks (1 with a plot, 1 without) to show examples on. They should be entirely self-sufficient, but 1 does require the installation of a specialty package used in the bootcamp. This is an important feature to make sure it works -- loading less common packages.

Let me know what to do next!

@ramnathv

This comment has been minimized.

Show comment
Hide comment
@ramnathv

ramnathv Jun 15, 2013

Owner

That looks good Jared. I am still cleaning up my code and testing things to make sure that it works smoothly. As a next step, I will fork your repo and add the necessary markup to your Rmd file that would make the slides interactive, and we can proceed from there.

Owner

ramnathv commented Jun 15, 2013

That looks good Jared. I am still cleaning up my code and testing things to make sure that it works smoothly. As a next step, I will fork your repo and add the necessary markup to your Rmd file that would make the slides interactive, and we can proceed from there.

@jknowles

This comment has been minimized.

Show comment
Hide comment
@jknowles

jknowles Jun 16, 2013

Great! Looking forward to it!

On Sat, Jun 15, 2013 at 6:56 AM, Ramnath Vaidyanathan <
notifications@github.com> wrote:

That looks good Jared. I am still cleaning up my code and testing things
to make sure that it works smoothly. As a next step, I will fork your repo
and add the necessary markup to your Rmd file that would make the slides
interactive, and we can proceed from there.


Reply to this email directly or view it on GitHubhttps://github.com/ramnathv/slidify/issues/224#issuecomment-19495405
.

Great! Looking forward to it!

On Sat, Jun 15, 2013 at 6:56 AM, Ramnath Vaidyanathan <
notifications@github.com> wrote:

That looks good Jared. I am still cleaning up my code and testing things
to make sure that it works smoothly. As a next step, I will fork your repo
and add the necessary markup to your Rmd file that would make the slides
interactive, and we can proceed from there.


Reply to this email directly or view it on GitHubhttps://github.com/ramnathv/slidify/issues/224#issuecomment-19495405
.

@ramnathv

This comment has been minimized.

Show comment
Hide comment
@ramnathv

ramnathv Jun 20, 2013

Owner

I am almost done abstracting away all the boilerplate code for interactive slides into slidifyLibraries. I will share an example with you shortly, that you can play with. My current solution generates an html deck that is compatible with both OpenCPU and Shiny. So, if you post the deck on a gh-pages branch on github, then a user can execute code in the deck, using OpenCPU. If opened using Shiny, then Shiny will take over and code will be executed using your R installation. My idea is to make this as simple as possible.

Owner

ramnathv commented Jun 20, 2013

I am almost done abstracting away all the boilerplate code for interactive slides into slidifyLibraries. I will share an example with you shortly, that you can play with. My current solution generates an html deck that is compatible with both OpenCPU and Shiny. So, if you post the deck on a gh-pages branch on github, then a user can execute code in the deck, using OpenCPU. If opened using Shiny, then Shiny will take over and code will be executed using your R installation. My idea is to make this as simple as possible.

@jknowles

This comment has been minimized.

Show comment
Hide comment
@jknowles

jknowles Jun 20, 2013

This sounds fantastic! Let me know when it's ready and I'll extend our
example and let you know about any issues as they arise. I'll try to help
troubleshoot as precisely as possible.

On Thu, Jun 20, 2013 at 9:54 AM, Ramnath Vaidyanathan <
notifications@github.com> wrote:

I am almost done abstracting away all the boilerplate code for interactive
slides into slidifyLibraries. I will share an example with you shortly,
that you can play with. My current solution generates an html deck that is
compatible with both OpenCPU and Shiny. So, if you post the deck on a
gh-pages branch on github, then a user can execute code in the deck, using
OpenCPU. If opened using Shiny, then Shiny will take over and code will be
executed using your R installation. My idea is to make this as simple as
possible.


Reply to this email directly or view it on GitHubhttps://github.com/ramnathv/slidify/issues/224#issuecomment-19758420
.

This sounds fantastic! Let me know when it's ready and I'll extend our
example and let you know about any issues as they arise. I'll try to help
troubleshoot as precisely as possible.

On Thu, Jun 20, 2013 at 9:54 AM, Ramnath Vaidyanathan <
notifications@github.com> wrote:

I am almost done abstracting away all the boilerplate code for interactive
slides into slidifyLibraries. I will share an example with you shortly,
that you can play with. My current solution generates an html deck that is
compatible with both OpenCPU and Shiny. So, if you post the deck on a
gh-pages branch on github, then a user can execute code in the deck, using
OpenCPU. If opened using Shiny, then Shiny will take over and code will be
executed using your R installation. My idea is to make this as simple as
possible.


Reply to this email directly or view it on GitHubhttps://github.com/ramnathv/slidify/issues/224#issuecomment-19758420
.

@ramnathv

This comment has been minimized.

Show comment
Hide comment
@ramnathv

ramnathv Jun 20, 2013

Owner

I posted a video here on Interactive Docs. The slide most relevant to your situation is the second slide. I will be adding a blog post and the source code that would make it easy for anyone to replicate the interactive deck I create in the video. Based on that, we can work on fine tuning your demo slides.

Owner

ramnathv commented Jun 20, 2013

I posted a video here on Interactive Docs. The slide most relevant to your situation is the second slide. I will be adding a blog post and the source code that would make it easy for anyone to replicate the interactive deck I create in the video. Based on that, we can work on fine tuning your demo slides.

@ramnathv

This comment has been minimized.

Show comment
Hide comment
@ramnathv

ramnathv Jun 23, 2013

Owner

@jknowles Did you see the video and blog post on how to transform a slide deck to an interactive one? Once you have seen it, it should be pretty straightforward to transform your slides accordingly. Let me know.

Owner

ramnathv commented Jun 23, 2013

@jknowles Did you see the video and blog post on how to transform a slide deck to an interactive one? Once you have seen it, it should be pretty straightforward to transform your slides accordingly. Let me know.

@jknowles

This comment has been minimized.

Show comment
Hide comment
@jknowles

jknowles Jun 24, 2013

@ramnathv The video and the document looks great. I will start the first conversion shortly. Quick question -- what are some ways to distribute this material? Is openCPU an option for posting the documents online and having a user interact with them without having to load shiny and run the deck on their local machine -- a bridge too far for the users targeted by the bootcamp materials!

@ramnathv The video and the document looks great. I will start the first conversion shortly. Quick question -- what are some ways to distribute this material? Is openCPU an option for posting the documents online and having a user interact with them without having to load shiny and run the deck on their local machine -- a bridge too far for the users targeted by the bootcamp materials!

@ramnathv

This comment has been minimized.

Show comment
Hide comment
@ramnathv

ramnathv Jun 24, 2013

Owner

@jknowles The deck should automatically default to OpenCPU when it does not find Shiny. At least, that is the way I designed it, and it would need some testing to make sure that it is robust. However, using OpenCPU instead of Shiny comes with a few limitations that you need to be aware of:

  1. Each code chunk is independent, as OpenCPU does not support persistence. So while writing the tutorial, you need to make sure that each code chunk is independent, including loading of libraries, since it would lead to an error otherwise.
  2. You will only be able to use packages already on OpenCPU. I know there is a way by which users can upload packages and then use them, but I haven't been able to get it to work.

Easiest way to check if OpenCPU is taking over from Shiny, is to open a simple server from the root directory, instead of using runDeck. You can achieve this using python, and running this code from the command line.

$ python -m SimpleHTTPServer

Let me know if you have additional questions, or encounter some difficulties while making this work. Thanks for agreeing to work with this highly experimental package. But I hope it will transform R tutorials into more interactive experiences online.

I have another idea that would tie in well with these interactive tutorials. It is the ability to sync a video or audio recording with the slides, so that the tutorial becomes more personal. You can find an example of this here

http://ramnathv.github.io/slidifyExamples/examples/popcornjs/#1

So, once you are set up with the interactive tutorials, I might want to ask if you are interested in helping me test this as well!

Owner

ramnathv commented Jun 24, 2013

@jknowles The deck should automatically default to OpenCPU when it does not find Shiny. At least, that is the way I designed it, and it would need some testing to make sure that it is robust. However, using OpenCPU instead of Shiny comes with a few limitations that you need to be aware of:

  1. Each code chunk is independent, as OpenCPU does not support persistence. So while writing the tutorial, you need to make sure that each code chunk is independent, including loading of libraries, since it would lead to an error otherwise.
  2. You will only be able to use packages already on OpenCPU. I know there is a way by which users can upload packages and then use them, but I haven't been able to get it to work.

Easiest way to check if OpenCPU is taking over from Shiny, is to open a simple server from the root directory, instead of using runDeck. You can achieve this using python, and running this code from the command line.

$ python -m SimpleHTTPServer

Let me know if you have additional questions, or encounter some difficulties while making this work. Thanks for agreeing to work with this highly experimental package. But I hope it will transform R tutorials into more interactive experiences online.

I have another idea that would tie in well with these interactive tutorials. It is the ability to sync a video or audio recording with the slides, so that the tutorial becomes more personal. You can find an example of this here

http://ramnathv.github.io/slidifyExamples/examples/popcornjs/#1

So, once you are set up with the interactive tutorials, I might want to ask if you are interested in helping me test this as well!

@juanchiem

This comment has been minimized.

Show comment
Hide comment
@juanchiem

juanchiem Jun 23, 2015

@ramnathv Is there a way to write some italics words in the first slide?
such as » title: Soybean (Glycine max) yield in Iowa

@ramnathv Is there a way to write some italics words in the first slide?
such as » title: Soybean (Glycine max) yield in Iowa

@jwhendy

This comment has been minimized.

Show comment
Hide comment
@jwhendy

jwhendy Oct 4, 2016

Any update on this? I was surprised by the behavior thinking it was on my end, so I googled it and found this. Given that io2012 is the default, is it possible to have this fixed? It appears to still be present, as adding the <style> bits for em fixed the issue for me.

jwhendy commented Oct 4, 2016

Any update on this? I was surprised by the behavior thinking it was on my end, so I googled it and found this. Given that io2012 is the default, is it possible to have this fixed? It appears to still be present, as adding the <style> bits for em fixed the issue for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment