I am a beginner at coding and I am trying to use a blog to keep a record of notes on learning.
I am using jupyter notebook for python, but can't find any solution for a simple way to copy a snippet of html code into the blog. I can only do it now by saving examples/notes as an image
Is there a simple way to do it , such as in this?
There are a few ways to do this, but I'm not sure that any of them are as quick/simple as you're imagining. A lot of this also depends on what blogging platform you use. For example, the second example you posted looks more like raw code that has been copy/pasted and then formatted by their blogging platform
Here's a few things you can try, but none of them offer direct "export cell" functionality. They also assume you only want a static notebook for display:
Export to HTML
Go to File > Download as > HTML
This will give you a HTML page with all of your cells nicely rendered. Its not that trivial to extract specific cells to post on a blog, but if you just want to display your entire notebook you have everything as a HTML that you can upload to wherever your blog is.
It will look exactly like your full notebook:
Export basic HTML template
You can use nbconvert to give you a basic HTML rendering of your notebook. Open a terminal, go to the directory where your notebook is located and type:
jupyter nbconvert name_of_notebook.ipynb --template basic
That will give you a html page without all of the flashy styling. This makes it much easier for you just copy/paste the specific cell you want (as HTML) into your blog. Your blog would then need some styling/syntax highlighting to make it look pretty
This will look like a simple rendering of your notebook:
As an aside, the first option (exporting the full HTML page) also uses nbconvert behind the scenes, just without the --template basic argument
Export to markdown
Go to File > Download as > Markdown
If your blogging platform supports markdown, you can export your notebook as a markdown file without all of the styling and copy/paste the cell you want into your blog post. Again, you'd need a way to style it on your blog
This will give you basic markdown code you can copy/paste anywhere:
```python
a = 2
b = 5
print(a+b)
```
7
Upload to nbviewer
http://nbviewer.jupyter.org/
If you have your notebook uploaded as a github gist, or in a github repo, or any other direct location on the web, you can use nbviewer to render it as a nice webpage, but you cant extract elements to place in your blog so not sure how useful this is for your purposes
Styling HTML/markdown on Wordpress
If you're using wordpress as your blogging platform there are a few useful plugins that will make the process a bit easier:
If you've exported a markdown file, you can use a plugin like Jetpack, which enables support for markdown in a blog post/page
If you've copy/pasted your code into a blog post (either by copying the HTML, markdown, or raw code) you can style it using a syntax highlighter like Crayon
If you really want your code to look like a jupyter notebook cell, you can use a plugin like Simple Custom CSS to set up custom styling, but this takes quite a bit of work. There are a few sites showing how to set up CSS to look like a notebook cell (e.g. http://www.mianchen.com/wordpress-blogging-with-jupyter-notebook-in-five-simple-steps/)
If you have your notebook uploaded as a github gist, you can use oEmbed Gist to embed your notebook code into your post
For my own blog I've found the simplest solution to just copy/paste the raw code directly into my blog post, and then use plugins on the blogging platform (Wordpress in my case) to style the block of code
Related
I've done some analysis using Pandas on a csv file and have created a number of graphs using matplotlib and plotly.
I'm trying to get these graphs in a html page so my team can see them on a dashboard.
I know it's possible to download the image and embed into html, however, the csv file I performed my analysis on will be constantly updated i.e. I need a way of include the graphs on a html page which auto refreshes.
Is this possible?
I think it would be possible and check pyscrpit
https://pyscript.net/
where you can use python in html
https://github.com/pyscript/pyscript/blob/main/docs/tutorials/getting-started.md
here are some tutorials to get and idea of what I am talking about and to start
Then you can host the html page anywhere you like and they will see when you update it
Voila or Panel to make a dashboard is another way to go. That needs an active Python kernel at this time. (That is as opposed to the pyscript / webassembly route. JupyterLite currently works in WASM and Voila in WASM is in development.) Examining demonstrations available at the Voila Gallery will give you a sense of how it can work. All those example demos are served via MyBinder. And you can use that too, if your code and data can be public. If it cannot be public, you'd need to host a server that only your team can access.
JupyterLite would also be possible if you don't mind your team being able to see the code cells and things that compose your Jupyter notebook stepping through the analysis. That would not require an active Python kernel server-side because it is based on WebAssembly that would run inside the client machine, like PyScript. So all you would need to do was a have a server that can serve static files. That's a lower bar than Voila that would run on the server. How to get started deploying JupyterLite is here.
I would checkout out Dash or Plotly, here you can add generation of the graphs in a callback for isntace. Which would update them when the .csv updates. Good luck!
I want to execute a python file using real user inputs from Web page Form and output should be displayed in the same Web Page or Web Dashboard. I have now created the Python file as .py and ipynb formats. But now I want to take the user inputs to the python code from HTML form and after executing the code results should be displayed as a HTML format using a Web Page. What should I do to achieve this target? I don't know any way to link python file and HTML easily. If anyone have an idea regarding this please help me to solve this.
A way to make the jupyter notebook interactive and to take the user inputs into account when running the code in the cells of the notebook is to use Jupyter Widgets. Thanks to the widgets, you will be able to bind the value of some variables to some actions made by the users. For example, you can bind the value of a variable to a text input the user will fill. That way, you can create a form, or can even think of using slider, dropdown lists, etc. to collect the information needed and to run the code accordingly.
Then, you can convert your jupyter notebook to a dashboard through the use of some tools such as Voila.
Also, you can make the jupyter notebook publicly available thanks to some service such as Binder (and associated documentation), that makes it available through an url and running the notebook on their server. You can also think of running the jupyter notebook on your own server and to share the associated url to the users.
Those are some tools that are based on directly using the jupyter notebook without creating and coding any classical html web page on your own. Yet, if you intend to code your form in a specific html web page, those tools will not help unfortunately as they aim to "do that job for you".
My goal is to generate an interactive html file from plotly fig and embed this html in my website. I was previously using fig.write_html('name.html'), but in the generated HTML, there are some unwanted symbols like ampersands &&.
Now, I tried adding cdn like fig.write_html('name.html', include_plotlyjs="cdn"), which solves the && problem but I have some questions about this:
On using cdn, is my data still secured/private, and can there be some possible complications on embedding this html to my website?
Is there any better/alternate way of removing the && symbols/cleaning the initial html file generated by plotly?
TIA
The include_plotlyjs="cdn" parameter causes a script tag to be included in the HTML output that references the Plotly CDN ("content delivery network"). This offloads the work of providing the necessary javascript from your server to a more scalable one. A browser will typically cache this making subsequent page loads faster.
Your data security/privacy is not affected by this option.
If the unwanted text you refer to is part of the Plotly JavaScript, it must be loaded however this solution will keep it from appearing in your HTML.
See the documentation for to_html for more information.
So i want to display well formatted code with syntax coloring as we see in stackoverflow, in my blog. While I paste my code in ckeditor under the code section, it is pretty good and well formatted. Like in the picture below.
I want something like that to appear on my website. But when I save it and view it on my website, I get formatted but not syntax colored code. Like the picture below.
Am I doing anything wrong here. Please help
You want code/syntax highlighting. There is a ckeditor plugin for that or you can use a Pygments, python syntax highlighter. Here is a short tutorial how to create django filter with Pygments
I'm having trouble getting my mpld3 plot to show up in my Wordpress page. I make my plot, then use mpld3.save_html() to get an html file that contains my figure. However, when I paste this code into my Wordpress page (using the Text editor, not the visual editor) nothing happens. I paste both the script and div tags. I know my javascript is working because I can write alert('Hello'); inside script tags, which works fine. I've also tried installing the "Insert Javascript & CSS" plugin, which also did not work.
Is there some way to embed these graphs into Wordpress, and if not, how does one embed interactive charts in a Wordpress post?
I suspect that the d3.js and mpld3.js were not found, which would explain why you don't see the chart.
There is a d3_url and mpld3_url that you may want to provide and set to the url of a CDN where the files are available for example See https://mpld3.github.io/modules/API.html#mpld3.fig_to_html
Even after setting that properly you may have problems as this is not the recommended way to use javascript within wordpress. You can also try an embed with stricter separation from wordpress: see http://www.datamaplab.com/posts/embedding-javascript-visualization-wordpress/ for reference.