Automatic <a> around headings in Pandoc - html

This Markdown code:
# Introduction
Turns into this HTML code when compiled with Pandoc:
<h1 id="introduction">Introduction</h1>
The way I use Markdown:
Generate HTML document
Edit it in MS Word to add page numbering
HTML version goes to blog, MS Word version goes to uni submissions
In CSS I can override link colors if they are inside H# tags, but MS Word has problems interpreting hierarchy of CSS overrides... and ends up with wrong colors anyway.
Is there a way to generate HTML without headings being wrapped in anchor tags, like below?
<h1 id="introduction">Introduction</h1>

In case there is no solution, here is a little PHP script I wrote to remove tags from headings that must be run on the resulting HTML file:
<?php
// Usage: php cleanheadings.php myhtmlfile.html
// Check that arguments were supplied
if(!isset($argv[1])) die('No input file, exiting');
// Load file
$content = file_get_contents($argv[1]);
// Cut out the <a> tag
$heading = '/(<h[123456] id="[\w-0-9]+">)(<a href="#[\w-0-9]+">)(.+)(<\/a>)(<\/h[123456])/mu';
$clean = '$1$3$5';
$cleanhtml = preg_replace($heading,$clean,$content);
// Write changes back to file
file_put_contents($argv[1], $cleanhtml);
?>

Related

Adding cross reference in html in Rmarkdown

I am working on a Rmarkdown book with the package bookdown. At some point, I am using a R chunk to create some HTML code (with the option "asis" in the chunk header). In that HTML, I would like to add a reference to a chunk in an other part of the book. Note that this part is created in a separated html file by pandoc.
The function generating the HTML works well and the HTML is rendered as expected, but the references added with #ref(chunkid) are not converted to links. They are just plain text in the HTML.
I tried to add the function cat to print the HTML code, but if I do so, the HTML is not rendered and is shown as plain text.
This is what I have currently:
```{r results = 'asis'}
"<h2>An html title</h2>
<div>\\#ref(titi22)</div>
"
```\
This will render the expected HTML when the book is knitted but the link in the div is not created. #ref(titi22) is written in the div.
On the real case, this is what I get
If I add cat:
```{r results = 'asis'}
cat("<h2>An html title</h2>
<div>\\#ref(titi22)</div>
")
```\
The HTML is not rendered nor the reference.
How can I render the reference and the HTML?
Thank you
In the bookdown:
output:
bookdown::html_document2:
... it works right:
<h2>An html title</h2>
<div> Here is my first table: \#ref(tab:tab1) <div>
Tab:
```{r tab1}
#any tab
```
I found where the problem was.
The html code I am using was produced with the library htmltools and converted to text with the function doRenderTags. This function do a nice job but the indentation is no read as expected by pandoc (see here : R markdown asis breaks valid html code). So the solution was just to use the parameter indent = FALSE in doRenderTags. After that, the HTML code was not indented and rendered as expected by pandoc.

Have different style apply to different syntax highlighter languages

I have a jekyll site where I post a lot of shell examples in code blocks. I struggle to visually delineate between the script/shell commands and their output of the commmands.
Generated html:
<pre><code class="language-powershell">
function DemoCode {
return 'rab', 'oof'
}
DemoCode
rab
oof
</code></pre>
In this example, the last two lines need to be obviously the output from the first 4 lines.
Markdown is currently just normal triple-backtick with a powershell tag:
```powershell
function DemoCode {
return 'rab', 'oof'
}
DemoCode
rab
oof
```
I'd prefer to avoid splitting it into a second code block. Wordpress let me do this with inline style tags, but it was a pig of a job.
This isn't a good solution for me but I could have a separate code block with the 'plaintext' tag to the syntax highlighter:
The best I have so far is indeed with separate code blocks. If I apply the 'plaintext' tag to rouge, then at least I don't get syntax highlighting, which helps. But the generated html still inherits the same CSS from .highlight.
Markdown:
```powershell
function Write-Stuff {
Write-Output $Stuff
}
```
```plaintext
Output I would like with different color and background-color
```
I still need that to inherit different CSS, though. Generated HTML:
<div class="language-powershell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">#this is formatted with md code block and powershell tag</span>
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#formatted with md code block and plaintext tag
</code></pre></div></div>
If you want to go with separate code blocks, you can use a block IAL to set a custom class on the syntax highlighted blocks:
{:.my-custom-class}
``` powershell
function Write-Stuff {
Write-Output $Stuff
}
```
This would insert the my-custom-class right next to language-powershell highlighter-rouge, allowing you to customize your CSS appropriately.
As for avoiding splitting the block: That is not possible with kramdown. However, you could implement a custom syntax highlighter that knows how to do this.

How can I eliminate the empty line in code blocks rendered by jekyll?

GitHub Pages Jekyll use Pygments by default to render syntax highlighting for code blocks. But I prefer an easier alternative highlight.js to do the job because I only need to indent 4 spaces to mark code blocks in the markdown source files.
However, my R code are all mistakenly interpreted as php or perl or makefile or other type of code by highlight.js, and I want to manually mark the code block by
```r
(some r code)
```
instead. But when I use this, the first line of the code block always appears to be a blank line. I view the HTML source code produced by the 4-space mark, it is like
<pre><code>x <- rnorm(100)
y <- 2*x + rnorm(100)
lm(formula=y~x)
</code></pre>
which does not suffer from this problem.
How can I eliminate the blank line in the first line of the code block?
I face the same issue today when I change my highlighter to highlight.js.
With the help from others, I finally git rid of this blank line, and willing to share the solution. Basically, the whitespace inside <pre> is not trimmed, and be treated as a newline in the rendered page (you can use firebug extension of Firefox enabled with show whitespace to observe the extra line).
Then the solution is obvious.
put pre and code tags at the same line with your actual code. like this:
<pre><code class="css">#font-face {
font-family: Chunkfive; src: url('Chunkfive.otf');
}
or using solution provided by mhulse to make your raw post more readable
<pre><code
>line of code
Here and ...
Here
</code></pre>
Write your own js code to trim L/R whitespace(s) of your content before it be put in <pre>
For more details, check this page.

Rendering raw html with Redcarpet and Markdown

I'm using Redcarpet as a Markdown renderer and I would like to be able to display html or any text with < and > without it to be parsed.
Here is an illustration of what should happen:
The user types
I *want* to write <code>
The source of this comment when sent back by the server should be
I <em>want</em> to write <code>
Problem is since the renderer outputs escaped html when parsing the Markdown, I get:
I <em>want</em> to write <code>
Therefore I can't distinguish between the html that people send to the server and the html that is generated by the Redcarpet renderer. If I do a .html_safe on this, my markdown will be interpreted but the user-inputted html too, which shouldn't.
Any idea on how to fix this?
Note that the idea would be to display (but not parse) user-inputted html even if the user didn't use the backticks ` as expected with markdown.
Here is the relevant bit of code :
# this is our markdown helper used in our views
def markdown(text, options=nil)
options = [:no_intra_emphasis => true, ...]
renderer = MarkdownRenderer.new(:filter_html => false, ...)
markdown = Redcarpet::Markdown.new(renderer, *options)
markdown.render(text).html_safe
end
If I understand you correctly you just want <code> as normal text and not as an HTML element.
For that you need to escape the < and > with a backslash:
I *want* to write \<code\>

Prevent CKEditor from formatting code in source mode

How can you prevent any automatic formatting when in CKEditor when viewing in source mode?
I like to edit HTML source code directly instead of using the WYSIWYG interface, but whenever I write new lines, or layout tags how I would indent them, it all gets formatted when I switch to WYSIWYG mode and then back to source mode again.
I stumbled upon a CKEditor dev ticket, Preserve formatting of ProtectedSource elements, that alluded to a setting which may have existed once upon a time which would be exactly what I'm after. I just want to know how I can completely turn off all automatic formatting when editing in source mode.
I came up with a solution I thought would be foolproof (albeit not a pleasant one).
I learned about the protectedSource setting, so I thought, well maybe I can just use that and create an HTML comment tag before all my HTML and another after it and then push a regular expression finding the comment tags into the protectedSource array, but even that (believe it or not) doesn't work.
I've tried my expression straight up in the browser outside of CKEditor and it is working, but CKEditor doesn't protect the code as expected (which I suspect is a bug involving comment tags, since I can get it to work with other strings). In case you are wondering, this is what I had hoped would work as a work-around, but doesn't:
config.protectedSource.push( /<!-- src -->[\s\S]*<!-- end src-->/gi );
and what I planned on doing (for what appears to be the lack of a setting to disable formatting in source mode) was to nest all my HTML within the commented tags like this:
<!-- src -->
<div>some code that shouldn't be messed with (but is)</div>
<!-- end src -->
I'd love to hear if anyone has any suggestions for this scenario, or knows of a setting which I have described, or even if someone can just fill me in as to why I can't get protectedSource to work properly with two comment tags.
I really think it's gotta be a bug because I can get so many other expressions to work fine, and I can even protect HTML within the area of a single comment tag, but I simply cannot get HTML within two different comment tags to stay untouched.
My solution to this was to use comments in my system, but before feeding the page content to CKEditor, convert them to custom HTML tags. Then, upon save, convert them back to my comment tags.
For your syntax that would be something like this in PHP. Before printing the page content to the textarea:
$content = str_replace(array('<!-- src -->','<!-- end src -->'),array('<protected>','</protected>'),$content);
Before saving the resulting content:
$content = str_replace(array('<protected>','</protected>'),array('<!-- src -->','<!-- end src -->'),$content);
In the CKEditor configuration:
protectedSource:[/<protected>[\s\S]*<\/protected>/g]
Hope that helps!
I wanted to preserve newlines in my source, and the protectedSource feature works well for that. I added this to my config.js:
config.protectedSource = [/\r|\n/g];
config.allowedContent=true; will do the trick
Here is the full HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="http://cdn.ckeditor.com/4.5.10/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.config.allowedContent=true;
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
I solved this problem by simply surrounding the back-end output of edit form page with a conditional on a $_GET variable - when you click on "Expert Mode" it loads a plain textarea instead of the ckeditor system. Your invocation of the ckeditor object will vary depending on your setup. ( I have a custom class that calls/builds the editor object )
<div id="postdivrich" class="postarea">
<?php
if( isset( $_GET['expert'] ) )
{
print "<div style=\"text-align:right;\">Editor mode</div>\n";
print "<textarea name=\"content\" style=\"height:400px;width:{$nEwidth}px;\">{$aDoc['content']}</textarea>\n";
}
else
{
print "<div style=\"text-align:right;\">Expert mode</div>\n";
require_once( 'admin/editor.class.php' );
$aDoc['content'] = str_replace( "\r", '', str_replace( "\n", '', nl2br( $aDoc['content'] ) ) );
$oEditor = new setEditor( $aDoc['content'], $nEwidth, "400", 'content' );
$oEditor->ShowEditor();
}
?>
</div>
Does this answer help? Basically you can turn off the options adding a javascript, it looks like.