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>
Related
I want to pass CSS ::after content as a specific word from its class element.
If class names are "language-css", "language-html", etc, in this case, I want to pass the content as the word after the "-".
code::before {
content: attr(class);
}
<code class="language-css"> some code here </code>
<code class="language-html"> some code here </code>
<code class="language-javascript"> some code here </code>
I know this returns the whole text from the CSS class, does CSS support any split function as JavaScript does?
In this particular case, you can hack is with some negative text-indent if the prefix is always the same. The code element is using a monospace font so it's easy using ch unit
code::before {
content: attr(class);
display:inline-block;
text-indent:-9ch; /* adjust this based on your real case */
clip-path:inset(0); /* hide the overflow */
}
<code class="language-css"> some code here </code>
<code class="language-html"> some code here </code>
<code class="language-javascript"> some code here </code>
Here is what I want to do:
#if (condition)
{
<div class="test">
}
<span class="test2">...</span>
#if (condition)
{
</div>
}
This does not work because the Blazor compiler thinks the div is never closed.
So I need to do this:
#if (condition)
{
<div class="test">
<span class="test2">...</span>
</div>
}
else
{
<span class="test2">...</span>
}
It works fine, but I have a big code redundancy with the span.
How can I do this properly?
Please note div and span are examples. In reality, my code is bigger.
Thanks
What you're seeing is really a Razor syntax issue rather than specifically a Blazor issue. This question and answer cover it well.
So, you can do what you're trying to do in the first example, but there are also other ways of solving that issue, at least one of which is Blazor specific (there are more no doubt):
Make the class conditional
Rather than trying to not render the div, you could make the class itself conditional.
So in the code section of your page you could declare a property:
#code {
string myClass = "";
protected override void OnInitialized()
{
if (condition)
{
myClass = "whatever";
}
}
}
And then use that in your razor:
<div class='#myClass'>
<span class="test2">...</span>
</div>
That way the span is only on the page once.
Split the common code into a separate component
Another approach is to make the common part (the span in this case) into a separate component and then render that component conditionally:
#if (condition)
{
<div class="test">
<YourComponent />
</div>
}
else
{
<YourComponent />
}
That's probably overkill for the span in your example, but makes more sense where the new component would be replacing multiple lines of code.
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
For example, I want to hilight keywords "add", "mov", etc in code like:
<code>
add 1, 2<br/>
mov 3, 4<br/>
</code>
So can I change style of specific keywords in block using just CSS, not editing HTML?
Update.
Ok, for workaround I attach to page script like:
window.onload = function()
{
var list = document.getElementsByTagName("code");
for (var i = 0; i < list.length; i++)
{
list[i].innerHTML = list[i].innerHTML
.replace(/mov/g, '<span id="keyword">mov</span>')
.replace(/set/g, '<span id="keyword">set</span>');
}
}
But, I still would be glad to find a solution in just css.
I think you'd have to wrap the words in a tag to be styled e.g.
<code>
<span class="func">add</span> 1, 2<br/>
<span class="func">mov</span> 3, 4<br/>
</code>
Then use the class added in your CSS file to style the words
.func
{
color: blue;
}
example can be seen here http://jsfiddle.net/6NAG3/
Edit: to see what a code pretty print looks like under the hood, inspect the above code in dev tools and you can see how they wrap elements
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