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?
Related
The organization that I work for has a HTML template for our website. I'm using this template as a custom HTML template in R markdown:
---
title: "My report"
output:
html_document:
template: my-template.html
toc: true
---
Below is a snippet of the HTML template for our website. As with everything else in the template, the table of contents follows my organization's style guide. The HTML code for the table of contents is this:
<div class="panel-body">
<ul class="sidebar-items">
<li>header 1</li>
<li>Header 2</li>
<li>Header 3</li>
</ul>
</div>
I need to customize this template by inserting pandoc variables so that I can use it as my html template in Rmarkdown.
My problem is this: how can I do this and still keep the class="sidebar-items" attribute in the <ul> tag?
I've tried this:
<div class="panel-body">
<ul class="sidebar-items">
$toc$
</ul>
</div>
But the result of course is an extra pair of <ul>-tags:
<div class="panel-body">
<ul class="sidebar-items">
<ul>
<li>header 1</li>
<li>header 2</li>
<li>header 3</li>
</ul>
</ul>
</div>
How can I prevent this, but still include the class="sidebar-items" attribute?
I could just change it manually in the output HTML file from Rmarkdown, but the problem is that I
need to create many HTML files, and I would very much like to avoid this extra manual
work.
Thanks a lot for your help!
As #mb21 points out in the comments: there is currently no (easy) way to this via pandoc. You could use a pandoc filter to create the TOC yourself, but that would be a bit of an effort.
I suggest to either
post-process the HTML output,
add a JavaScript snippet to insert the desired classes or
rewrite the CSS/JS code which depends on the sidebar-items class to use a different selector.
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
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)
I'm using MVC 3 for web development, here when I create HTML using custom helper classes, it looks very ugly.
for example: If I build a list using helper, it gives me a result as follows:
<ul>
<li>some link 1</li>
<li>some link 2</li>
<li>some link 3</li>
<li>some link 4</li>
</ul>
What I need is, formatted HTML as follows:
<ul>
<li>some link 1</li>
<li>some link 2</li>
<li>some link 3</li>
<li>some link 4</li>
</ul>
Is there any native way available to achieve this?
This shouldn't matter because this only affects human readers of your rendered markup. I won't deny it is useful to have readable HTML, but how much time can you justify spending to work on getting this part "right"?
There are two main resolutions to this:
The first - process the generated HTML
With this approach, you get the MvcHtmlString returned from your helper function, then run that generated HTML fragment through a HTML formatting library. This approach will be very slow, as it has to render the unindented HTML, then parse and analyse it, then re-render it. Expect it to add up to 10ms to your page load time if you're using a heavy library to reformat the code or if you're sending it out to an external library for processing (e.g. a HtmlTidy executable).
The second - fix the HTML helper
The best way, of course, is to reimplement your HTML helper so it indents the code. Fortunately HTML Helpers don't tend to be too complicated. It isn't too hard to copy the generated source (using Reflector), then paste it into a new helper method with the right indentation.
This is, of course, assuming that the entire <ul> with all of its <li> elements is being made by a single Helper call, and not that you're omitting the indentation yourself in your view file.
In visual studio, when I paste an html snippet into the source window of an aspx/ascx file the IDE re-indents the contents. For instance, if I paste this ...
<div><ul><li>Item 1</li><li>
Item 2</li><li>Item 3</li></ul>/div>
.. the ide will reformat the text to ....
<div>
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
</div>
But really, I want the html formatted like this ...
<div>
<ul>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</div>
How do I change the way VS indents html to the above?
You can change this by introducing custom formatting for the text (HTML) editor, got to:
Options -> Text Editor -> HTML -> Formatting -> Tag Specific Options (Button)
-> Client HTML Tags -> a -> Set Line breaks dropdown to Before and after
Do this for all the tags you want formatted differently.
Ctrl+K then Ctrl+D, will format the current document.
Ctrl+K then Ctrl+F, will format the selected text.