If I have some Markdown like
## My Title
A paragraph of content here.
code_line(1);
// a code comment
class MoreCode { }
and more text to follow...
How can I set a class on the <code> block that's generated in the middle there? I want to have it output
<code class=’prettyprint’>
code_line(1);
// a code comment
class More Code { }
</code>
But I can't seem to set it. I do not have control over the Markdown code being run, only over the content.
You can embed HTML in Markdown. Type literally what you want, with no indent.
<code class="prettyprint">
code_line(1);
// a code comment
class More Code { }
</code>
For the specific case of syntax highlighting following the back ticks at the start of a fenced code block with the language works just about everywhere these days.
```js
code_line(1);
// a code comment
class MoreCode { }
```
Though not answering the question exactly. You can use a different render too like Maruku or Kramdown:
## My Title
A paragraph of content here.
~~~
code_line(1);
// a code comment
class MoreCode { }
~~~
{: .prettyprint}
and more text to follow...
Output (tested with haml & kramdown):
<pre class="prettyprint"><code>
code_line(1);
// a code comment
class MoreCode { }
</code></pre>
Kramdown syntax: http://kramdown.rubyforge.org/quickref.html#block-attributes
Markdown has an extension (attr_list.py) which allows you to use Maruku's {: .classname} syntax.
Markdown Extra supports class and id attributes using curly braces. See: https://michelf.ca/projects/php-markdown/extra/#spe-attr
Related
I am trying to add a minimal code syntax highlighting rule to a web page by only changing the color of comments - lines starting with "#" symbol within the <pre><code> tags.
To my surprise I could not find information about this by searching on StackOverflow. However projects such as ft-syntax-highlight make me assume this to be possible.
Is it possible to adjust the color of lines starting with "#" in the following code block using only css?:
<pre><code>
# function to do something
do_something_here(x1, x2);
</code></pre>
And if so - how?
Probably not what you're looking for but a minimal workaround would be using CSS's content and :before
View in jsfiddle
[comment]:before {
content: "# " attr(comment);
color: red;
white-space: pre-wrap;
width: 45vw;
display: inline-block;
}
<pre>
<code comment="function to do something here line function to do something here line function to do something here line">
do_something_here(x1, x2);
</code>
<code comment="you can use `missing()` to test whether or not the argument y was supplied">
fooBar <- function(x,y){
if(missing(y)) {
x
} else {
x + y
}
}
</code>
</pre>
Note: usedata-comment instead of comment for better html semantics
My goal is to be able to display something like this:
I want to background highlight a piece of code inside a code block that already has syntax highlighting. I want to do this on a markdown file I have on Github that is hosted on Github Pages (can use kramdown markdown, html, css).
I am aware that you can have syntax highlighting inside a code block doing something like this:
```java
int foo (void) {
int i;
}
```
I am also aware that I can background highlight text inside a code block by doing something like this:
<pre><code>int foo (void) {
<span style="background-color:yellow">int i;</span>
}
</code></pre>
But how do I combine these two things?
You can use Google's code-prettify to color the code. It will colorize all code with the class prettyprint. Then you can use a <span> tag to set the background color.
pre {
background-color: #eee;
border-radius: 5px;
}
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify#master/loader/run_prettify.js"></script>
<pre>
<code class="prettyprint">
int foo (void) {
<span style="background-color:yellow">int i;</span>
}
// Yay code and it has colors
</code>
</pre>
I am using VS Code and tring to create some custom emmet snippets. When I try to make a newline in the snippet it places a space instead.
Here is an example code:
{
"html": {
"snippets": {
"qq": "<div>\n</div>"
}
}
}
When I use the snippet 'qq' it should return:
<div>
</div>
But it returns:
<div> </div>
Any ideas why?
Try to use ${newline} instead. That should produce a new line rather than '\n'.
I have a dojo widget with generated content, text message in my case.
Message text is a formatted text with <b>, <i> etc. tags. When I put it to my widget via ${messageText} it is shown as it is a plain text.
How to make my widget parse all these tags to DOM nodes?
upd
.jsp fragment:
<script>
(new MyWidget({
text: "<b>message</b>"
}).placeAt(dojo.byId("placeWidgetHere");
</script>
<div id="placeWidgetHere"></div>
widget .html template:
<div>${text}</div>
Instead of using substitution variables (which is not recommended), you can use an attribute map on your custom widget.
<div>
<span data-dojo-attach-point="messageTextNode"></span>
</div>
declare('MyWidget'], [TemplatedMixin], {
template: ...,
messageText: '',
_setMessageTextAttr: { node: "messageTextNode", type: "innerHTML" },
});
new MyWidget({
messageText: "<b>message</b>"
}, "placeWidgetHere");
The problem is that messageText has "<" and ">" symbols converted to "<" and ">" respectively.
I added .replace(/</g, "<").replace(/>/g, ">") to messageText and that began to work properly.
Thanks to everyone who tried to help me.
If I set the following string into a div how can I get the newline working at HTML?
{
"s":"Phrase1.\n\nPhrase2"
}
Thanks.
Wrap preformatted text in <pre> tags:
<pre>{ "s":"Phrase1.\n\nPhrase2" }</pre>
Shows up as:
{ "s":"Phrase1.
Phrase2" }
Edit: Another option would be to set the div's style or class to behave the same as a pre tag:
<div style="whitespace:pre"/>
foo.innerHTML = myObj.s.replace(/\n/g,"<br>");
{"s", "phrase1.<br /><br />"phrase2"}