Markdown already ignores everything within a <div> element, and various other block-level elements. However, I need to tell Markdown to ignore everything within <code> blocks as well. Is there a way to tell Markdown to do this?
As an FYI, I am using BlueCloth.
The Markdown spec does not specify how <code> blocks should be processed. What exact type of markup are you trying to get the Markdown processors to ignore?
Here is the Markdown Syntax page.
I'm not exactly sure what you want to achieve.
You have something like the following right?
#Heading
<code>
$my = 'php code here';
</code>
Other text
Do you want your output to be like the one below?
<h1>Heading</h1>
<code>
$my = 'php code here';
</code>
<p>Other text</p>
For code in markdown you have to indent the code by four spaces so what you should do is the following in your markdown source file.
#Heading
$my = 'php code here';
Other text
The code is indented four spaces and markdown will surround it with and tags automatically.
Related
I am trying to convert a large body of tex code into html using Pandoc. I have multiple custom-defined environments and commands in the LaTeX source that I would like to tag with classes in the resulting HTML.
How can I make sure that the following LaTeX code:
\begin{myspecialenvironment}
hello
\end{myspecialenvironment}
is converted to the following HTML
<div class="myspecialenvironment">
hello
</div>
and the following LaTeX
\myspecialcommand{hola}
converted to HTML as follows?
<span class="myspecialcommand">hola</span>
I had the same question and looked in vain for relevant documentation, but then I noticed that Pandoc is already doing what you propose, at least for block environments. :-) I don't know about inline commands.
I'm using Pandoc to generate a Reveal.js presentation. It includes code in fenced code blocks, like this:
```java
// Some Java code
```
Reveal.js supports a way to add a highlight to a specific line or range of lines, with the data-line-numbers="1" attribute that should be added to the <code> tag.
I've tried to add this attribute to the fenced code block in various ways, such as this
``` { .java data-line-numbers="1" }
// Some Java code
```
But I can't get it to work. Is there a way to use Reveal.js's data-line-numbers in Pandoc? Or perhaps Pandoc has a way to achieve something similar? Or do I need to give up and just use those messy <pre><code> HTML tags in my Markdown?
The correct syntax should be:
``` {.java .number-lines}
// Some Java code
```
Pandoc does the syntax-highlighting itself, and is sensitive to the number-lines class.
Pandoc's HTML output for code blocks does not follow the way that reveal.js expects them to be written. E.g., the default pandoc way of indicating that lines are to be numbered is to mark the block with the number-lines class, while reveal.js expects a boolean data-line-numbers attribute. Even adding the data-line-numbers attribute manually won't work: pandoc wraps the code in <pre> and <code> elements and adds all code block attributes to the <code> element, while reveal.js looks for them in the <pre> element.
I struggled with pandoc's way of handling code blocks for reveal.js output myself, so I wrote this lua-filter: revealjs-codeblock. This filter adjusts pandoc's HTML output such that it follows the reveal.js specs.
It supports the .number-lines and .numberLines classes as well as the data-line-numbers attribute.
On the main page of every repository in GitHub or BitBucket it shows the Readme.md in a very pretty format.
Is there a way to make the same thing with ruby? I have already found some gems like Redcarpet, but it never looks pretty. I've followed this instructions for Redcarpet.
Edit:
After I tried Github's markup ruby gem, the same thing is happening.
What is shown is this:
And what I want is this:
And I'm sure it's not only css missing, because after 3 backquotes (```) I write the syntax like json or bash and in the first image it is written.
Edit2:
This code here:
renderer = Redcarpet::Render::HTML.new(prettify: true)
markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
html = markdown.render(source_text)
'<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>'+html
Generated this:
Github provides its own ruby gem to do so: https://github.com/github/markup.
You just need to install the right dependencies and you're good to go.
You need to enable a few nonstandard features.
Fenced code blocks
Fenced code blocks are nonstandard and are not enabled by default on most Markdown parsers (some older ones don't support them at all). According to Redcarpet's docs, you want to enable the fenced_code_blocks extension:
:fenced_code_blocks: parse fenced code blocks, PHP-Markdown style. Blocks delimited with 3 or more ~ or backticks will be considered as code, without the need to be indented. An optional language name may be added at the end of the opening fence for the code block.
Syntax Highlighting
Most Markdown parsers to not do syntax highlighting of code blocks. And those that do always do it as an option. Even then, you will still need to provide your own CSS styles to have the code blocks styled properly. As it turns out, Redcarpet does include support for a prettify option to the HTML renderer:
:prettify: add prettyprint classes to <code> tags for google-code-prettify.
You will need to get the Javascript and CSS from the google-code-prettify project to include in your pages.
Solution
In the end you'll need something like this:
renderer = Redcarpet::Render::HTML.new(prettify: true)
markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
html = markdown.render(source_text)
As #yoones said Github shares their way to do it but to be more precise they use the gem "commonmarker" for markdown. Though as far as I can tell this thing does not give the full formatted HTML file but only a piece that you insert into <body>. So you can do it like I did:
require "commonmarker"
puts <<~HEREDOC
<!DOCTYPE html>
<html>
<head>
<style>#{File.read "markdown.css"}</style>
</head>
<body class="markdown-body Box-body">
#{CommonMarker.render_html ARGF.read, %i{ DEFAULT UNSAFE }, %i{ table }}
</body>
</html>
HEREDOC
Where did I get the markdown.css? I just stole the CSS files from an arbitrary Github page with README rendered and applied UNCSS to it -- resulted in a 26kb file, you can find it in the same repo I just linked.
Why the table and UNSAFE? I need this to render an index.html for Github Pages because their markdown renderer can't newlines within table cells, etc. so instead of asking it to render my README.md I make the index.html myself.
I'm trying to import a code snippet into HTML using doxygen. The code snippet is a few lines long and I've preformatted it using <pre> tags. However, when the HTML is generated, doxygen is inserting
<div class="line">
before each line of my snippet. The result is the HTML is generated with extra space between each line of the code snippets. How do I get rid of this? I just want the code snippet in there with the pre-formatted whitespace.
This is with doxygen 1.8.1.1
I ran into the same problem and reported a bug against DoxyGen. See link: https://bugzilla.gnome.org/show_bug.cgi?id=681135
The answer is quick and simple: The "line" class has been added quite recently and it takes an update of the custom CSS files. In my case the resolution was simple:
Open the project in DoxyWizard
Go to "Expert" view and configure HTML output
Remove the entry for your Custom CSS
run DoxyWizard once
Copy the div.line and div.line.glow definitions from default CSS into your custom CSS and modify as desired
Be happy
HTH, Nick
I am trying to create a simple blog that has code inclosed in <pre> tags.
I want to display "read more" after the first closing </pre> tag is encountered, thus showing only the first code segment.
I need to display all text, HTML, code up to the first closing </pre> tag.
What I've come up with so far is the follow:
/^(.*<\/pre>).*$/m
However, this matches every closing </pre> tag up to the last one encountered.
I thought something like the following would work:
/^(.*<\/pre>{1}).*$/m
It of course does not.
I've been using Rubular.
My solution thanks to your guys help:
require 'nokogiri'
module PostsHelper
def readMore(post)
doc = Nokogiri::HTML(post.message)
intro = doc.search("div[class='intro']")
result = Nokogiri::XML::DocumentFragment.parse(intro)
result << link_to("Read More", post_path(post))
result.to_html
end
end
Basically in my editor for the blog I wrap the blog preview in div class=intro
Thus, only the intro is displayed with read more added on to it.
This is not a job for regular expressions, but for a HTML/XML parser.
Using Nokogiri, this will return all <pre> blocks as HTML, making it easy for you to grab the one you want:
require 'nokogiri'
html = <<EOT
<html>
<head></head>
<body>
<pre><p>block 1</p></pre>
<pre><p>block 2</p></pre>
</body>
</html>
EOT
doc = Nokogiri::HTML(html)
pre_blocks = doc.search('pre')
puts pre_blocks.map(&:to_html)
Which will output:
<pre><p>block 1</p></pre>
<pre><p>block 2</p></pre>
You can capture all text upto the first closing pre tag by modifying your regular expression to,
/^(.*?<\/pre>{1}).*$/m
This way you can get the matched text by,
text.match(regex)[1]
which will return only the text upto the first closing pre tag.
Reluctant matching might help in your case:
/^(.*?<\/pre>).*$/m
But it's probably not the best way to do the thing, consider using some html parser, like Nokogiri.