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

see [doc](http://jupyter-notebook.readthedocs.io/en/stable/index.html) for more info

demo for html content

jupyter notebook support:

  • markdown
  • html
  • css
  • javascript

see doc for more info

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"/>
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 \begin{equation} \sin(x)=\frac{1}{y^2\pi} \tag{*} \label{theeq} \end{equation} 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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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
alert('hello')
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 to vanish
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");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"white");

// Fill with gradient
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 [ ]: