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.
Related
I was wondering if it was possible to highlight code written using the HTML <code>...</code> tags in a similar fashion to the native markdown code block using the tripe backtick ```.
I prefer the <code>...</code> environment due to its ability to be customized using css, as I want code to stand out visually.
You can customise the styles of the code syntax-highlighted by triple backtick by wrapping it in a <div>:
<div style="font-weight: bold">
```javascript
var x = 1;
function y() {
return 0;
}
```
</div>
Note the extra new lines (otherwise it will not render properly). This works well in JupyterLab:
JupyterLab jupytext
This extension adds a few Jupytext commands to the command palette. You can use it to select the desired ipynb/text pairing for your notebook.
I need to convert some HTML to Markdown with Pandoc. All is fine except the code blocks in my document are not converted properly. I need them to appear in the resulting Markdown document as backtick-code blocks with syntax definition.
For example, if I have such source HTML:
<pre class="python"><code>
def myfunc(param):
'''Description of myfunc'''
return do_something(param)
</code></pre>
I want Pandoc to convert it into:
```python
def myfunc(param):
'''Description of myfunc'''
return do_something(param)
```
But what I am getting is:
``` {.python}
def myfunc(param):
'''Description of myfunc'''
return do_something(param)
```
It's almost there, but the syntax definition is in curly braces and with a dot, which is not recognised by my Markdown parser. How can I get ```python instead of ``` {.python} when converting HTML to Markdown?
I have control over the source HTML, so I can change it the way needed. If there's an option to insert "raw markdown" into the HTML which will be ignored by Pandoc, that would work for me too, I can embed those blocks into the source HTML the way I need, but I need to tell Pandoc not to touch them. But I can't find such option in the docs.
This behavior is governed by the fenced_code_attributes extension. It is enabled by default; disabling it will give your desired output:
pandoc --to=markdown-fenced_code_attributes ...
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.
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);
?>
What tag can I use to prevent any interpretation? I need that because I need to write down some source code and it's result in blogger. I have this code in blogspot, but the code inside the <pre> is processed
The code is as follows:
<pre class='prettyprint'>
$latex \displaystyle S(n)=\sum_{k=1}^{n}{\frac{1}{T_{k}}=\sum_{k=1}^{n}{\frac{6}{k(k+1)(k+2)}$
</pre>
This is the result:
$latex \displaystyle S(n)=\sum_{k=1}^{n}{\frac{1}{T_{k}}=\sum_{k=1}^{n}{\frac{6}{k(k+1)(k+2)}$
When I can replace '$' in <pre> with something equivalent, I could avoid this issue.
I tried <code> and <pre>, but they all interpret the content.
ADDED
I'm trying to use the javascript code found in this post.
If I understand correctly, you are using Replacemath, and its documentation says: “Should you need to to prevent certain $ signs from triggering LaTeX rendering, replace $ with the equivalent HTML <span>$</span> or $, or put the code inside a <pre> or <code> block if appropriate.” Of these, the first method seems to actually work.
That is, replace all occurrences of “$” inside the pre element by <span>$</span>.
I tested this by publishing a test in my blog (which had been dormant for 6 years...). I had to manually break the pre block to fit into the column.