'Juptyter Notebook HTML export showing </div> and not formatting properly
My wife recently did a boot camp program for Data analytics. She is trying to push her projects to GitHub for display. However, some of the Jupyter notebooks are not exporting to HTML properly or showing up on GitHub's display properly. Bellow is screen shots and code snipets.
I can't identify where I need to make changes to resolve this while still maintaining the comments and formatting. Most of her projects have this issue. I noticed the issue seems to start at but I have not been able to identify the specific issue. When I load up the HTML, I do notice that a lot of the conversion gets messed up, like so:
<p></div></p>
So it looks like some of the < /div > are getting messed up during the export/conversion to proper HTML.
When loaded up into the latest version of Jupyter Notebook...
jupyter core : 4.7.1
jupyter-notebook : 6.4.10
The display looks like this
However, when I export as HTML, or upload that to GitHub, it looks like this:
Here is the HTML code, as it looks its the Jupyter Notebook:
# <font color='#32cd32'><b><u> Reviewer Comment </u></b></font>
<div class="alert alert-success" >
**Hello! I am Larchenko Ksenia and I'm glad to review your project**!
You can find my comments in green, yellow and red boxes like these:
</div>
<div class="alert alert-success" >
**Success:** green color shows that everything is done perfectly;
</div>
<div class="alert alert-warning" >
**Remark & Recommendation:** yellow color highlights something to pay attention for;
</div>
<div class="alert alert-danger" >
**Needs fixing:** if the color is red, please rework.
</div>
<div class="alert alert-success" >
**Please, don't remove my comments:)**
</div>
And if I load up the raw ipynb and look at that section, it looks like this:
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Hello, my name is Ivan Alexeev and I am going to review your project.\n",
"\n",
"\n",
"There may be some shortcomings in the work that I will ask you to eliminate, you fix them and I check your decisions. You can find my comments in <font color='green'>green</font>, <font color='orange'>orange</font> or <font color='red'>red</font> boxes like this:\n",
"\n",
"\n",
"<div class=\"alert alert-success\" style=\"box-shadow: 4px 4px 4px\">\n",
"Success: if everything is done successfully\n",
"</div>\n",
"\n",
"\n",
"<div class=\"alert alert-warning\" style=\"box-shadow: 4px 4px 4px\">\n",
"Remark: if I can give some recommendations or additional information\n",
"</div>\n",
"\n",
"\n",
"<div class=\"alert alert-danger\" style=\"box-shadow: 4px 4px 4px\">\n",
"Need fixing: if the block requires some corrections. Work can't be accepted with the red comments\n",
"</div>\n",
"\n",
"\n",
"Thank you for taking time to complete this project, I appreciate the amount of work you've done! There are some issues that you need to work on, but overall it is a great start! \n",
"\n",
"\n",
"Please, don't delete my comments) \n"
]
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|


