I use pygments to highlight code.
And I want to add some specify style to a part of code in highlight block.
For example, I want to change "private String" color to red.
{% highlight java %}
public class A {
<span color="red">private String</span> xx;
}
{% endhighlight %}
How can I do this?
A Name token is transformed by Pygments to :
<span class="n">Private</span>
<span class="n">String</span>
<span class="n">name</span>
or
<span class="o">(</span>
<span class="n">String</span>
<span class="n">name</span>
<span class="o">){</span>
Styling .n class can be done in your highlight.css (or maybe .scss) with :
.highlight .n{ color: red; }
But you will not target the Private String specific token.
If you want to do so, you will have to write you own Pygments lexer
Related
I have a input box where user enters string and does some string formatting like font name, bold,italic,underline, font size etc. for selected text. When user underlines any word or sentence then that word/sentence source code is like <span style="text-decoration: underline;"></span>
If user changes font size or font name then <span style="font-family"...> or <span style="font-size"...
these tags are attached.
In this i have to replace <span style="text-decoration: underline;"> tag and its corresponding </span> with <u>and </u>. How to do that. Because replacing <span style="text-decoration: underline;"> tag is easy. I can find it and replace it. But replacing its </span> tag is difficult, if there are more than 1 </span> tags. Because I need to find out which </span> tag need to be replaced from multiple </span> tags.
How can I do this in angular 6. Thank you.
Any help would be appreciated.
In Javascript, you can do this kind of replace using regular expression:
var x = '<span style="text-decoration: underline;">Test</span>'
function replace_span_to_u(input) {
return input.replace(/\<span style\=\"text-decoration\: underline\;\"\>(.*?)\<\/span\>/g, function(matched, index) {
return '<u>' + index + '</u>';
})
}
replace_span_to_u(x)
I have a a table with dynamic value of td, some of td will be empty and some will has value, the empty td I want there background red, and filled td should be green
I tried to do that with css by :
td:empty {
background-color: red;
}
the issue that I faced is empty td has only spaces & lines content that spaces make td:empty totally useless
in other words the css reading there is a content in td tag, but in fact that content is just spaces and lines which is fake content
how could fix his problem ?
--- update ---
here is output result : https://i.imgur.com/Qz3lE22.png
and here is the script :
<td>
{% for mission in missions|get_missions_by_user:user %}
{% if mission.start_date|date:"d-m-Y" == week_dates.6.date|date:"d-m-Y" %}
{{ mission.title }}
<!-- filled cell - this should be green background -->
<br>
{% endif %}
<!-- empty cell - this should be red background -->
{% endfor %}
</td>
Could adding the needed calss by yesno be a solution for you?
CSS:
td.empty {
background-color: red;
}
td.filled {
background-color: green;
}
HTML:
<td class='{{missions.count|yesno:"filled,empty"}}'>
{% for mission in missions %}
{% if mission == 'MISSION' %}
{{ mission }}
<!-- filled cell - this should be green background -->
<br>
{% endif %}
<!-- empty cell - this should be red background -->
{% endfor %}
</td>
Note: I've never done any code with django and I'm not familiar with python. In javascript I would check for missions.length. I think you know what I've tried above. Hope i helps.:)
Thx for every body tried to help me ,
after few days of searching and asking Javascript exports I got the script
this script is an alternative way for td:empty but trimming spaces and lines
here is the js script :
$("#tableID td:not(:first-child)").each(function () {
if ($(this).text().replace(/\s/g, "").length > 0) {
$(this).css("backgroundColor", "green");
} else {
$(this).css("backgroundColor", "red");
}
});
you have to add and remove class if tabld td is empty then add class and on that class you give background.
I've created a custom tag to hide zero values from HTML. I use this for hiding currency formatted numbers when its values are zero.
This is my custom tag:
def hideifz(value):
return '' if value == 0 else value
The problem is that this tag deletes some of my HTML.
This is the relevant part of my template:
<div class="price">
<span class="price-new">{{ publication.price_record.low_price|CLP }}</span>
<span class="price-old">{{ publication.price_record.high_price|hideifz|CLP }}</span>
</div>
This HTML is for showing product prices. publication.price_record.low_price and publication.price_record.high_priceare the prices of my product. If the product is in sale, it must have high_price != 0, and this value must be shown in the HTML.
CLP is just another tag for currency formatting:
def toCLP(value):
if not value:
return value
return '$'+intcomma(int(value)).replace(',', '.')
If high_price is not zero, the output HTML is okay. For example:
<div class="price">
<span class="price-new">$75.990</span>
<span class="price-old">$83.990</span>
</div>
In the other hand, if high_price is zero, some of my HTML is deleted:
<div class="price">$21.990</div>
Note that span.price-new and span.price-old were removed.
Now, if I remove the hideifz tag, the output of the previous example looks like this:
<div class="price">
<span class="price-new">$21.990</span>
<span class="price-old">0.0</span>
</div>
The spans are back when I remove the hideifz tag.
I just want to hide the python variable/value from the html, preserving the outer span for other uses.
I know I can solve this by simply using the {% if val %} tag, but I wanted to create my own tag for simplicty.
I'm working with django 1.10.
Thanks you.
When iterating in fields of a (non-model) django form as follows:
<form method="post" role="form" class="form-inline">
{% for field in form.visible_fields %}
<div id="div_{{ field.html_name }}" class="form-group">
<strong>{{ field.label_tag }}</strong> {{ field }}
</div>
{% endfor %}
</form>
The <strong> tag is not actually applied to the label.
Is there any way around this (without using Metaclass in the actual form class or using inline styling for the <span> element?
you may use a css selector like .
.form-group>label{
...
font-weight: bold;
...
}
other options are ...
Use the FormField html ID attribute as a css selector. (it works for specific fields, when you want to apply the style for single fields.
#form-field-id{ font-weight: bold; }
Use a html class attribute. in this case you have two choices to set the widget attribute. Set a parameter in your ModelForm class Field or rewrite the widget template.
I'm looking for a command line tool (or Perl module or VIM script or whatever) that will take some input files (such as XML or JavaScript files) and format them in HTML. I specifically want my output not to contain stuff like <span style="color: red"> or <font color=red> according to a particular colour scheme, rather it should use CSS class names to mark up the different syntactic parts of the file.
For example, if I had this file as input:
function f(x) {
return x + 1;
}
the kind of output I would like is:
<pre><span class=keyword>function</span> <span class=ident>f</span><span class=punc>{</span>
<span class=keyword>return</span> <span class=ident>x</span> <span class=op>+</span> <span class=numliteral>1</span><span class=punc>;</span>
<span class=punc>}</span></pre>
Does anyone know of such a tool?
Something like VIM's 2html.vim script, but outputting class="" attributes with the syntax highlight group names (like "Constant", "Identifier", "Statement", etc.) would be ideal.
Thanks,
Cameron
You can feed a file into GeSHi using PHP on the command line (or cURL your own local server or some other hack)
http://qbnz.com/highlighter/geshi-doc.html#basic-usage
There is buf2html.vim. Unfortunately, it uses non-semantic class names: See http://intrepid.perlmonk.org/apropos.vim/buf2html/current/myself.html
I think this is exacly what Vim's :TOhtml does if you
:let html_use_css = 1
Original:
function f(x) {
return x + 1;
}
output:
<pre>
<span class="Identifier">function</span> f(<span class="">x</span><span class="javaScriptParens">)</span><span class=""> </span><span class="Identifier">{</span>
<span class="Statement">return</span><span class=""> x + </span>1<span class="">;</span>
<span class="Identifier">}</span>
</pre>