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.
Related
Markdown support code blocks that are very useful. By specifying which language we want (like this ```cpp), we can have color syntax highlighting automatically too. Example shown below.
#include <iostream>
int main(){
printf("hello");
}
So, my question is how do I do this on an html file?
I already know you can make code blocks, with this -> <pre><code> write here </code></pre>, but I want the syntax highlighting function.
Any guidance would be appreciated. Thanks.
You would want to use a library like highlight.js
Otherwise you would have to wrap every key word, variable, function name, operators, etc. in their own span tag and apply classes, creating a color schema for every distinct thing in every supported language.
Other than using a library (or creating your own, for fun) this is rather tedious.
FYI: Ever thought about right-click and inspect element of your example? Your example results in this HTML:
<pre class="lang-cpp s-code-block hljs"><code><span class="hljs-meta">#<span class="hljs-meta-keyword">include</span> <span class="hljs-meta-string"><iostream></span></span>
<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span></span>{
<span class="hljs-built_in">printf</span>(<span class="hljs-string">"hello"</span>);
}
</code></pre>
As you can see this would be pretty tedious to create yourself, so use a library for that.
I have some js code which renders the following HTML
<div contenteditable="false" tabindex="0" class="ProseMirror">
<p> didn't project a significant increase</p>
</div>
In the browser, it actually displays the characters #039; instead of converting it to ' is there a way to force/prevent the browser from doing this conversion?
When rendering an HTML entity, it may need to be compiled. You can use one of these options:
Interpolation
<p> didn{{ `'` }}t project a significant increase</p>
v-html
<p> didn<span v-html="`'`"></span>t project a significant increase</p>
Note that these first two examples are using a template literal, not single quotes.
Render function
If using a render function, you can set the innerHTML domProps:
render(h) {
return h('span', {
domProps: {
innerHTML: 'didn't project a significant increase'
}
});
}
Here is a demo
Original
You're missing an &, it should be:
<p> didn't project a significant increase</p>
In my specific situation. I ended. up solving the problem by using the he HTML encoder/deccoder https://www.npmjs.com/package/he to decode the HTML before rendering.
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.
Pandoc default HTML template contains these two variables:
quotes,
math.
How are they supposed to be used?
More specifically I see that quotes sets the values for the tag <q>. Is this tag used in markdown to HTML conversion?
tl;dr: they seem to be mostly obsolete legacies from previous versions of pandoc
quotes
A little archeology of pandoc commits shows that 'quotes' was added when pandoc switched from using <q> tags to directly adding quotes signs. A new option, --html-q-tags was added to keep the previous behavior: the option wraps quotes in <q> and sets quotes to true so that a piece of css code is added as explained in the html template. See this commit to pandoc and this commit to pandoc-templates. See the behavior with the following file:
"hello world"
This:
pandoc test.md -t html --smart --standalone
Produces (skipping the usual head, with no css affecting <q>)
<p>“hello world”</p>
While this
pandoc test.md -t html --standalone --html-q-tags --smart
produces (skipping the usual header)
<style type="text/css">q { quotes: "“" "”" "‘" "’"; }</style>
</head>
<body>
<p><q>hello world</q></p>
</body>
You have to use --smart though.
math
It looks like this was introduced to include math rendering scripts inside the standalone file. See this commit from 2010. I think some command-line options picking non-(currently)-default math rendering systems, like --mathml, sets this variable to a value that actually makes sense (like copying the math rendering scripts). Try:
pandoc -t html --mathml
For the quotes variable, see #scoa.
As regards the math variable, I found what follows.
When using MathML, that is the option --mathml, the code block:
$if(math)$
$math$
$endif$
in the default HTML conversion template adds a portability script to the HTML output.
Anyway, Chrome and Edge do not currently support MathML and Firefox seems to support it without this script.
So, for a custom template, removing the $if(math)$ ... code block will not affect MathML rendering.
When using MathJax, that is the option --mathjax, $if(math)$ ... adds to the HTML output the script block:
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML-full" type="text/javascript"></script>
This is always necessary to render the maths formulae.
When using the --latexmathml, a giant script, converting the LaTeX style math into MathML, is inserted by the $if(math)$ ... code block. Without this code block in the conversion template, the script is not inserted and the maths can't be rendered.
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.