How to change color in markdown cells ipython/jupyter notebook? - jupyter-notebook

I'm only looking to format a specific string within a cell. I change that cell's format to "Markdown" but I'm not sure how to change text color of a single word.
I don't want to change the look of the whole notebook (via a CSS file).

You can simply use raw html tags like
foo <font color='red'>bar</font> foo
Be aware that this will not survive a conversion of the notebook to latex.
As there are some complaints about the deprecation of the proposed solution. They are totally valid and Scott has already answered the question with a more recent, i.e. CSS based approach.
Nevertheless, this answer shows some general approach to use html tags within IPython to style markdown cell content beyond the available pure markdown capabilities.

Similarly to Jakob's answer, you can use HTML tags. Just a note that the color attribute of font (<font color=...>) is deprecated in HTML5. The following syntax would be HTML5-compliant:
This <span style="color:red">word</span> is not black.
Same caution that Jakob made probably still applies:
Be aware that this will not survive a conversion of the notebook to
latex.

An alternative way to do that, is to enter a LaTeX environment within the notebook and change color from there (which is great if you are more fluent in LaTeX than in HTML). Example:
$\color{red}{\text{ciao}}$
would display ciao in red.

For example, if you want to make the color of "text" green, just type:
<font color='green'>text</font>

If none of the above suggestions works for you, try using the style attribute.
**Notes**
<p style="color:red;">ERROR: Setting focus didn't work for me when I tried from jupyter. However it worked well when I ran it from the terminal</p>
This gives me the following result

The text color can be changed using,
<span style='color:green'> message/text </span>

I have tested the ideas that I found in these answers in google colabs.
<span style='color:red'>green</span>
$\color{green}{\text{blue}}$
<font color='red'>orange</font>
Of these the 2nd (LaTeX $…$, and html font) versions work. The style version does not work.
Note: the html font element is deprecated. Therefore I am using the LaTeX version.

<span style='color:blue '> your message/text </span>
So here it is a perfect html css style entry inside a notebook ipynb file.
Of course you can choose your favourite color here and then your text.

<p style="font-family: Arial; font-size:1.4em;color:gold;"> Golden </p>
or
Text <span style="font-family: Arial; font-size:1.4em;color:gold;"> Golden </p> Text

This is a very simple and effective trick for google colab.
Use the (empty) link syntax of the markdown.
[your_message]()
Then you'll get the blue text (underline).

Related

Select All Japanese Text, But Without Romanization

Important Edit—
It appears that there's nothing wrong with my language code here, something else somewhere I've done in my CSS has stopped my code from working. This means all my guesses as to why it's not working were completely wrong. (lol)
When I find out what went wrong, I'll update this question; but if I can't find the error, I may just redo it from scratch— the project isn't so monolithic that that still is an option.
For now, the question is effectively solved.
Original Question—
I've been writing a mixed-language HTML document —primarily in English— and have been using different formatting for Japanese language text. For example, since Japanese doesn't use italicized/oblique or bold text, emphasis must be done with text-emphasis instead. However, romanized Japanese —Romaji— inherits these text effects when I'd rather it not.
This initial interaction was expected, so I tried to use :not(:lang(ja-latn)) to prevent this. While admittedly a bit messy, it ought to work… but it does not. I think the issue is that ja-latn, Romaji, is a kind of Japanese as far as HTML & CSS is concerned, and doesn't understand what I'm trying to do. Not labeling the Romaji or changing it to English would be textually inaccurate, confuse screen readers, and generally be a be a bit of a hack.
This is how I had done this (in a condensed form) provided as an example of what I mean. If I made some mistake in formatting not described in this post, that's only because I keep getting "Secure Connection Failed" errors whenever I try to test the snippet, and missed it.
i,em{font-style:italic;}
b,strong{font-weight:bold;}
:is(i,em):lang(ja):not(:lang(ja-latn)){
font-style:normal;
font-weight:normal;
text-emphasis: open currentcolor;
text-emphasis-position: over right;}
ruby{ruby-position:under;}
.goodhappy{color:green}
.wrongangry{color:red; text-emphasis-color:red;}
<div lang="en" >
English text, because I <em class="goodhappy" >don't</em> speak Japanese.<br />
<ruby lang="ja"><!--
-->日<rt lang="ja-hira" >に</rt><!--
-->本<rt lang="ja-hira" >ほん</rt><!--
-->語<rt lang="ja-hira" >ご</rt><!--
--><em class="goodhappy" >わ</em><rt lang="ja-hira" >わ</rt><!--
-->話<rt lang="ja-hira" >はな</rt><!--
-->せません<!--
--></ruby>
<br />
<span lang="ja-latn" >Nihongo <em class="wrongangry" >wa</em> hanasemasen</span>
</div>
How would I go about selecting only CJK japanese characters, but not Romaji text? To be clear, I realize this could be easily done by using a span.class and not using em/i/b/strong etc.. What I mean is, is there a way to accomplish this only in CSS, without more HTML markup than is strictly necessary?
In your question you stated that you tried :not(:lang(ja-latn)) with no success, but in your code you have :not(ja-latn) which is invalid. I changed your code using :not(:lang(ja-latn)) and as you can see it works properly leaving the romaji without the emphasis on top of it
i,em{font-style:italic;}
b,strong{font-weight:bold;}
:is(i,em):lang(ja):not(:lang(ja-latn)){
font-style:normal;
font-weight:normal;
text-emphasis: open currentcolor;
text-emphasis-position: over right;}
ruby{ruby-position:under;}
.goodhappy{color:green}
.wrongangry{color:red; text-emphasis-color:red;}
<div lang="en" >
English text, because I <em class="goodhappy" >don't</em> speak Japanese.
<ruby lang="ja"><!--
-->日<rt lang="ja-hira" >に</rt><!--
-->本<rt lang="ja-hira" >ほん</rt><!--
-->語<rt lang="ja-hira" >ご</rt><!--
--><em class="goodhappy" >わ</em><rt lang="ja-hira" >わ</rt><!--
-->話<rt lang="ja-hira" >はな</rt><!--
-->せません<!--
--></ruby>
<br />
<span lang="ja-latn" >Nihongo <em class="wrongangry" >wa</em> hanasemasen</span>
</div>

How to change the color of text in markdown cell in JupyterLab

I'm trying to change the color of the text in all markdown cells. Actually, I can change the color of font applying HTML code but I have to be doing it in each cell and I would like default color to be different from white. I've seen that you can edit the custom.css file of the theme I'm using to edit changes in the markdown cells but I can not find the line of the code to change the color of the text.
I have also tried to change the Notebook settings from the menu "Advanced Settings Editor" but in Markdown Cell Configuration I can not find any option related to changing the text color, only options such as "fontSize" or "fontFamily".
You could do this:
<div class="alert-success">
This is a green colored box
</div>
<div class="alert-danger">
This is a red colored box
</div>
<div class="alert-warning">
This is a yellow colored box
</div>
<div class="alert-info">
This is a blue colored box
</div>
Source: IBM Knowledge Center: Markdown for Jupyter notebooks cheatsheet
Finally i can to solve my problem. I was playing a bit with the .css file and finally figured out how to change the color of text. The path of file is "/home/sknt/anaconda3/share/jupyter/lab/themes/#jupyterlab/theme-dark-extension/index.css" [file name index.css] and I change the color of text in the section "#content font", specifically in "#Defaults use Material Design specification" changing the color code of "jp-content-font-color1.
However, this change also affects the output of the code cells and in the end it does not convince me. My final solution that work for me was create a custom file .css and use the following code to change the color of the text only in markdown cells:
from IPython.core.display import HTML
def css_style():
styles = open("[path to .css file]","r").read()
return HTML(styles)
css_style()
I hope that these solutions that worked for me help other people who may want to modify the appearance of their notebook. Thank's.

jupyter notebook X bootstrap

is it possible to integrate bootstrap components into a Juptyer Notebook.
ie: Making markdown tabs specific colors(making the whole markdown cell red), using glyph icons, etc
Thank you
Yeah. At least the alerts, you can just use the html code in a markdown cell.
For example,
<div class="alert alert-info">
<strong>Hi!</strong> This is a blue note.
</div>
would give you the blue alerts. Change info to success, warning, and danger are your options.

HTML Tags: Presentational vs Structural

I found many different views on many articles on presentation tags, with some people thinking all tags are presentational, but some others do not think so.
For example: in the HTML 5 specification, they do not think <small> is presentational.
In this list of tags - which are all HTML 5 supported - which tag is presentational and which is not?
<abbr>
<address>
<area>
<b>
<bdo>
<blockquote>
<br>
<button>
<cite>
<dd>
<del>
<dfn>
<dl>
<dt>
<em>
<hr>
<i>
<ins>
<kbd>
<map>
<menu>
<pre>
<q>
<samp>
<small>
<span>
<strong>
<sub>
<sup>
<var>
Who decides which HTML tag is presentational and Which is not - and how do they make that decision? Is it a particularly large group such as the W3C or is it based on groups of web developers, i.e. the web community? Also, between the two, which advice we should follow for deciding which tags are presentational?
If a tag is valid as according to the W3C in accepted doctypes, then what are the pros to not using any xhtml tag from any point of view?
in user/usability/accessibility point of view
if we use more HTML tags then pages without CSS will better.
in developer point of view
if we make use of more available tags in HTML, than we do not need to use <span class=className">
it takes more time to write and it uses more charter space than tags in HTML and CSS both.
For example:
instead of using:
<span class="boldtext">Some text<span>
.boldtext {font-weight:700}
We can use:
<b>Some text<b>
b {font-weight:700}
it looks cleaner, it is easier to use , it uses less characters - which will reduce the page size - and it is more readable in source. It also does not break the rule of content and presentation separation.
We can also do this:
<b class="important">Some text<b>
b.important {font-weight:700}
and whenever we want to change font-weight then we can change css only in both examples.
If a tag is considered valid by w3c in their recognized doctypes, then what are the pros to not using any X/HTML presentational tags which are not directly recognized by either the W3C, or by the HTML specifications?
Can we change any design parameters without changing anything in HTML? Does this fit within the meme of content and presentation separation?
If any HTML tag breaks the rule of separation, then does not the css property Content break as well?
see this article.
Why are the HEIGHT and WIDTH attributes for the IMG element permitted?. does it not break the rule of separation? A good debate on this matter can be found here.
W3C decides the semantics of tags. The specification documents of HTML5 gives conditions on the use of the various tags.
HTML5
To continue with your example, there is nothing wrong with using <b> to bold some text unless:
The text being bolded is a single entity already represented by a tag:
Incorrect:
<label for="name"><b>Name:</b></label>
Correct: (Use CSS to style the element)
label { font-weight: bold; }
<label for="name">Name:</label>
The text is being bolded to put added emphasis and weight on a section or words of a block of text.
Incorrect:
<p>HTML has been created to <b>semantically</b> represent documents.</p>
Correct: (Use <strong>)
<p>HTML has been created to <strong>semantically</strong> represent documents.</p>
The following is an example of proper use of the <b> tag:
Correct:
<p>You may <b>logout</b> at any time.</p>
I realize that there doesn't seem to be a lot of difference between the above example and the one using <strong> as the proper example. To simply explain it, the word semantically plays an important role in the sentence and its emphasis is being strengthened by bold font, while logout is simply bolded for presentation purposes.
The following would be an improper usage.
Incorrect:
<p><b>Warning:</b> Following the procedure described below may irreparably damage your equipment.</p>
Correct: (This is used to add strong emphasis, therefore use <strong>)
<p><strong>Warning:</strong> Following the procedure described below may irreparably damage your equipment.</p>
Using <span class="bold"> is markup-smell and simply shouldn't be allowed. The <span> element is used to apply style on inline elements when a generic presentation tag (ie.: <b> doesn't apply) For example to make some text green:
Incorrect:
<p>You will also be happy to know <span class="bold">ACME Corp</span> is a <span class="eco-green">certified green</span> company.</p>
Correct: (Explanation below)
<p>You will also be happy to know <b>ACME Corp</b> is a <em class="eco-green">certified green</em> company.</p>
The reason here why you would want to use <em> as opposed to <span> for the word green is because the color green here is used to add emphasis on the fact that ACME Corp is a certified green company.
The following would be a good example of the use of a <span> tag:
Correct:
<p>You may press <kbd>CTRL+G</hbd> at any time to change your pen color to <span class="pen-green">green</span>.</p>
In this example, the word green is styled in green simply to reflect the color, not to add any emphasis (<em>) or strong emphasis (<strong>).
The whole distinction between "presentation" elements versus "structure" element is, in my opinion, a matter of common sense, not something defined by W3C or anyone else. :-P
An element that describes what its content is (as opposed to how it should look) is a structure element. Everything else is, by definition, not structural, and therefore a presentation element.
Now, I'll answer the second part of your post. I understand this is a contentious topic, but I'll speak my mind anyway.
Well-made HTML should not concern itself with how it should look. That's the job of the stylesheet. The reason it should leave it to the stylesheet, is so you can deliver one stylesheet for desktop computers, another one for netbooks, smartphones, "dumbphones" (for lack of a better term), Kindles, and (if you care about accessibility, and you should) screen readers.
By using presentation markup in your HTML, you force a certain "look" across all these different types of media, removing the ability of the designer to choose a look that works best for such devices. This is micromanagement of the worst sort, and designers will hate you for it. :-)
To use your example, instead of using <b>, you should ask yourself what the boldness is supposed to express. If you're trying to express a section title, use one of the header tags (<h1> through <h6>). If you're trying to express strong emphasis, use <strong>. You get the idea. Express the what, not the how; leave the how to the stylesheet designers.
</soapbox>
It's not that presentational elements should be avoided, it's that markup should be as semantic as possible. When designing a document structure, default styling should be considered a secondary affect. If an element is used solely for presentation, it's not semantic, no matter what element is used.
The example usage of <b> isn't semantic, because <b> imparts no meaning. <span class="boldtext"> also isn't semantic. As such, their usage is mixing presentation into the structure.

Google Translation API

I have text that I would like to translate into Russian. The text has custom tags and has multiple <BR> tags. The API behaves oddly with <BR> tags. Are there known issues with <BR> tags? Is there a way around it or what is the best way to use Google JQuery tranlsation to translate the text?
The text is
<INPUTANSWER PARTID='1'>
<SPAN STYLE="FONT: 7pt 'Times New Roman'"> </SPAN>
Place a <STRONG>90 degree</STRONG> explicit angle constraint to the inside
faces of <STRONG>DP-1007:1 </STRONG>and<STRONG>DP-1006:1</STRONG> as shown.</P>
<P STYLE="MARGIN-LEFT: 0.5in; TEXT-INDENT: -0.25in">
2.
<SPAN STYLE="FONT: 7pt 'Times New Roman'"> </SPAN>
Drive this angle constraint between <STRONG>90 and 100 degrees</STRONG>
with an <STRONG>increment</STRONG> <STRONG>of 0.125 degrees.</STRONG>
</INPUTANSWER>
check this. Its the jquery translate project. I've used it before with normal text, never tried markup but quoting their home page
It also reduces the number of requests by concatenating elements and doesn't send unnecessary html markup still providing access to each element as they've got translated.
If this doesn't work you can always hold on to the original document fragment and just walk it, translate content and replace. I am sure this will work as the API behaved perfectly with plain text.
Find traslator, who would read machine transltions, thats a bad tone. besides completely unclear from English to Russian due complete different language structures. Easier to read in English than auto translated text

Resources