Setting Style Sheets for elements

To get the code blocks colored as in Cheat Sheet For Markdown I added the "**%%**HTML" code block below.

This tip was from the folowing Stack Exchange article



In [5]:

    
%%HTML
<style> 
pre.bash {background-color : rgb(253, 246, 227) !important;} 
span.mystyle {color: purple }
</style>

Now when I show code in Markdown cells, the format changes

HTML Code

%%HTML
<style> 
pre.bash {background-color : rgb(253, 246, 227) !important;} 
code {background-color : rgb(253, 246, 227) !important;}
code.bash {background-color : lightgrey !important;}
span.mystyle {color: purple }
</style>

Python

print "this is python code"

C++

#include <iostream>

using namespace std;

int main()
{
    cout << "Hello World!" << endl;
    return 0;
}

Bash

g++ -v
g++ hello.cc -o hello

Custom

g++ -v g++ hello.cc -o hello


g++ -v
g++ hello.cc -o hello

Source for more tricks

Latex expressions

$e^{i\pi} + 1 = 0$

$$e^x=\sum_{i=0}^\infty \frac{1}{i!}x^i$$

Append a style sheet to an HTML object

from json2html import *
from IPython.display import display, HTML

mydict = {a:1, b:2, c:3}

htmlcss = """
    <style type="text/css">
    th {   background-color: yellow;}
    </style>
    """

myhtml = HTML(json2html.convert(json = myjson))
myhtm.data = myhtm.data + htmlcss



In [2]:

    
from json2html import *
from IPython.display import display, HTML

mydict = { 'a':1, 'b':2, 'c':3}

htmlcss = """
    <style type="text/css">
    th {   background-color: yellow;}
    </style>
    """

myhtml = HTML(json2html.convert(json = mydict))
display(myhtml)



In [3]:

    
#after executing this cell, both tables change: the left column will have a yellow bg
myhtml.data = myhtml.data + htmlcss
display(myhtml)



In [ ]: