Rmarkdown Slidy indented lists - html

I use Rmarkdown with slidy mostly. I like it because I can use html tags outside of r code chunks (perhaps it is do-able in other formats, no idea). However I run into trouble with indented lists.
---
title: "Test"
author: "Me"
date: "Today"
output:
slidy_presentation
---
## Test Slide
<ul>
<li>One Bullet Point
</ul>
This works like a charm.
Output (html):
<div id="test-slide" class="slide section level2">
<h1>Test Slide</h1>
<ul>
<li>
One Bullet Point
</ul>
</div>
However:
## Test Slide Indented
<ul>
<li>One Bullet Point
<ul>
<li>One Indented Bullet Point
</ul>
</ul>
Causes trouble. Output (html again):
<div id="test-slide-indented" class="slide section level2">
<h1>Test Slide</h1>
<ul>
<li>
One Bullet Point
<ul>
<pre><code> <li>One Indented Bullet Point</code></pre>
</ul>
</ul>
</div>
And thus "list within the list" appears as a code chunk rather than an indented list in the html document.

You have four spaces preceding the line with the list element. This means that pandoc will interpret that line as a code chunk. As far as I know there's no option to prevent this, so you will need to remove the indenting before the html tags.
http://rmarkdown.rstudio.com/authoring_pandoc_markdown.html#verbatim-code-blocks
I will also point out that markdown supports nested lists so there's no need to use html tags in your example:
- One bullet point
+ One indented bullet

Related

Link does not work in HTML. I have used "" Tag

My link doesn't work in HTML and I don't know why.
<div class="banner-text">
<ul>
<li><h3>HOME</h3></li>
</li><h3>ABOUT US</h3></li>
</li><h3>CONTACT</h3></li>
</li><h3>STUDENT's CORNER</h3></li>
</ul>
<h1 class="big">CHAWLA CLASSES</h1>
</div>
Use a validator.
Only <li> elements may be children of <ul> elements.
Put the links in the list items, not the other way around.
Asides:
Level 3 heading elements should be used for headings. If the entirely content of a list item is a heading, you are using the wrong markup. Apply CSS if you want to format the list items.
Screen readers will tend to spell out words written in ALL CAPS letter-by-letter. If you want something to be visually rendered in capital letters: Use the CSS text-transform property.
You should change it like this
<ul>
<li> Home </li>
<li> About Us </li>
<li> Contact </li>
<li> Student's Corner </li>
</ul>
UPDATE: Well, I check again but it works. There is the screenshots
1
2
Put the anchor tag inside the <li> tag. If it doesn't work, go-to developer console to trace it .

common mark / vscode table of contents not working

I'm using the current version visual studio code and extensions Markdown All in One, Markdown Paste, markdownlint, and Markdown+Math.
in markdown I write:
## Table of Contents
1. [heading](##heading%201)
2. [heading](##heading%202)
## heading 1
...
## Heading 2
This works as expected in the preview screen, which is nice but irrelevant
In Html I get
<h2 id="table-of-contents">Table of Contents</h2>
<ol>
<li>heading 1</li>
<li>heading 2</li>
</ol>
<h2 id="heading-1">heading 1</h2>
...
<h2 id="heading-2">heading 2</h2>
and while the links navigate to file:///c:....html#heading%20X the broswer, current version of chrome, doesn't jump to the right spot.
How can I fix this? Is it a problem with the md to html transformation or the file protocol?

How to capture p and ul tags without grabbing ul's nested tags with Nokogiri?

With Nokogiri, I am trying to obtain all the "first" level p and ul HTML tags and having a little difficulty.
For example, here's the HTML that I'm working with
<p><strong>Just testing <em>something</em> out </strong>over here.</p>
<p>Here's a paragraph that contains bullets though:</p>
<ul>
<li>One thing here.
<ul>
<li>One more thing</li>
</ul>
</li>
<li>Another thing here</li>
</ul>
<p>
<br>
</p>
<ul>
<li>nothing</li>
</ul>
<p>Some more text.</p>
I'm wanting to grab all the paragraphs and all of the unordered lists. Because the unordered lists aren't surrounded with the p tag, I have to grab for those as well using the following example:
#data = the HTML above
html = Nokogiri::HTML(data)
html.xpath("//p | //ul").each do |p|
# some code
end
The problem is that the output of html.xpath("//p | //ul") looks like this:
<p><strong>Just testing <em>something</em> out </strong>over here.</p>
<p>Here's a paragraph that contains bullets though:</p>
<ul>
<li>One thing here.
<ul>
<li>One more thing</li>
</ul>
</li>
<li>Another thing here</li>
</ul>
<ul>
<li>One more thing</li>
</ul>
<p>
<br>
</p>
<ul>
<li>nothing</li>
</ul>
<p>Some more text.</p>
As you can see there, One more thing repeats itself because it's one of the nested ul tags inside of ul. Because of that, my code ends up doing the same thing twice to this text.
So what I'm looking for is to "exclude" nested tags if it's the same of the parent so that when I run html.xpath("//p | //u") or something similar, it looks at the ul tag and just treats it all as one element in the xpath output array
Is there a way to do this with Nokogiri?
You can use the following pattern to select first level element of certain name using XPath :
//target_element[not(ancestor::target_element)]
So for your specific case the XPath would be as follow :
//p[not(ancestor::p)] | //ul[not(ancestor::ul)]

Why are markdown bullet points separated by an extra newline?

My markdown page contains these lines:
- [Section1](#section1)
- [Subsection1](#subsection1)
- [Subsection2](#subsection2)
- [Section2](#section2)
- [Section3](#section3)
- [Section4](#section4)
The expected output (assume each bullet is a hyperlink):
Section1
Subsection1
Subsection2
Section2
Section3
Section4
The actual output (assume each bullet is a hyperlink):
Section1
Subsection1
Subsection2
Section2
Section3
Section4
I don't know why Github/Jekyll server doesn't generate the expected output.
When I viewed the source in the browser (Chrome), I found this (which is not expected):
<ul>
<li>
<p><a href='#section1'>Section1</a></p>
<ul>
<li><a href='#subsection1'>Subsection1</a></li>
<li><a href='#subsection2'>Subsection2</a></li>
</ul>
</li>
<li>
<p><a href='#section2'>Section2</a></p>
</li>
<li>
<p><a href='#section3'>Section3</a></p>
</li>
<li>
<p><a href='#section4'>Section4</a></p>
</li>
</ul>
Why do I see <p> tags here? Something wrong with the generator or my markdown code?
How should I fix it?
I have just run a few tests and it looks like it is the markdown processing engine that is causing the issue.
With the Maruku markdown engine the blank lines are added.
With the redcarpet markdown engine no additional lines are added.
With the kramdown markdown engine no additional lines are added.
(Can't test with rdiscount as it doesn't install on Windows)

HTML Tags placement in html page making alignment issue

I got into this weirdest problem. I have an unordered list with two list items as
<ul>
<li><p>1</p>
</li>
<li><p>2</p>
</li>
</ul>
(end tag of 1st list item and start tag of 2nd are in different lines)
This html code works fine. But when I change the above code to
<ul>
<li><p>1</p>
</li><li>
<p>2</p>
</li>
</ul>
(end tag of 1st list item and start tag of 2nd are in same line and also there is no space in between them), the alignment breaks.
You can see the problem here
http://jsfiddle.net/Venugopal/AawU2/2/
At last found some workaround
click here