In [88]:
%%markdown
## demo for html content
**jupyter notebook** support:
* markdown
* html
* css
* javascript



## demo for html content¶

jupyter notebook support:

• markdown
• html
• css
• javascript

In [89]:
%%html
<h2> baidu iframe </h2>
<iframe src="https://www.baidu.com" width="100%"></iframe>


## baidu iframe

In [9]:
%%html
<img src="http://wx2.sinaimg.cn/large/0069pyKMgy1fo9clvtm03j31jk111475.jpg" width="90%" alt="fancam"/>

In [90]:
%%html
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
</video>

In [91]:
%%markdown
More on markdown
------
You can include code fence in md, and it even support mathematica!!
mathematica
ll=Table[i^2,{i,1,10,2}]
ll[[3;;]]
NIntegrate[Sin[x],{x,0,Pi}]

or
python
for i in array:
i = 3*i
def demo():
return 1

>Table is also supported

|t|e|s|t|
|---|---|---|---|
|1|2|3|4|

inline formular $$x^2=1$$


## More on markdown¶

You can include code fence in md, and it even support mathematica!!

ll=Table[i^2,{i,1,10,2}]
ll[[3;;]]
NIntegrate[Sin[x],{x,0,Pi}]


or

for i in array:
i = 3*i
def demo():
return 1


Table is also supported

t e s t
1 2 3 4

inline formular $$x^2=1$$

In [93]:
%%latex
You can use latex directly in the notebook, too
\begin{equation}
\sin(x)=\frac{1}{y^2\pi}
\tag{*}
\label{theeq}
\end{equation}
then we can cite the equation as eq.\eqref{theeq}

You can use latex directly in the notebook, too $$\sin(x)=\frac{1}{y^2\pi} \tag{*} \label{theeq}$$ then we can cite the equation as eq.\eqref{theeq}
In [94]:
%%html
<p>You can even include css to change the style of the whole notebook</p>
<style>
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>


You can even include css to change the style of the whole notebook

In [51]:
%%html
<h1>This is green title</h1>
<p> This cell shows the effect of the above css</p>
<p class="ex">This is paragraph with class "ex"</p>


# This is green title

This cell shows the effect of the above css

This is paragraph with class "ex"

In [96]:
%%markdown
# title
See? The css effect is global of the whole page. And it also controls markdown cell(as they are rendered as html first).


# title¶

See? The css effect is global of the whole page. And it also controls markdown cell(as they are rendered as html first).

In [72]:
%%markdown
test on
* html in markdown cell
* a link of external css
<h1> watch the car! </h1>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
<p> show me the money <i class="fa fa-credit-card"></i></p>


test on

• html in markdown cell
• a link of external css

# watch the car!

show me the money

In [73]:
%%js

In [86]:
%%html
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){$("h5").click(function(){
\$(this).hide();
});
});
</script>
<h3> Oh, jQuery also works here! </h3>
<h5>click to vanish</h5>
<h5>click again</h5>


### Oh, jQuery also works here!

##### click again
In [105]:
%%markdown
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<form>
<input type="checkbox" name="comments" value="a">Jupyter is amazing
<input type="checkbox" name="comments" value="f">Jupyter is fantastic
</form>
<canvas id="myCanvas" width="220" height="100" style="border:1px solid #d3d3d3;">
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle=grd;
ctx.fillRect(10,10,200,80);

</script>

In a word, basically you can do **everything** the webpage can do in those cells!


First name:
Last name:

Jupyter is amazing

Jupyter is fantastic </form>

In a word, basically you can do everything the webpage can do in those cells!

In [ ]: