【问题标题】:how to convert a jupyter notebook containing html tags to HTML?如何将包含 html 标签的 jupyter notebook 转换为 HTML?
【发布时间】:2022-09-24 00:33:33
【问题描述】:

我有一个 jupyter 笔记本(python),其中有 HTML 代码来显示部分,例如:

<div style=\"background-color: #1A079B; width:100%\" >
  <h2 style=\"margin: auto; padding: 20px; color:#fff; \">1 - Test </h2>
</div>

我想要的是将此笔记本转换为 HTML。我在笔记本单元格中使用了这个命令:

 !jupyter nbconvert $p1 --to html --output $p2

输出 HTML 文件已创建但完全错误。我认为转换不喜欢嵌入在markdown中的html。

我把整个代码都用了。它不是很可读,它是 ipynb 格式

        {
     \"cells\": [
      {
       \"cell_type\": \"markdown\",
       \"id\": \"geographic-press\",
       \"metadata\": {},
       \"source\": [
        \"<div style=\\\"background-color: #1A079B; width:100%\\\" >\\n\",
        \"<h2 style=\\\"margin: auto; padding: 20px; color:#fff; \\\">1 - Test </h2>\\n\",
        \"</div>\"
       ]
      },
      {
       \"cell_type\": \"markdown\",
       \"id\": \"allied-finish\",
       \"metadata\": {},
       \"source\": [
        \"bla bla bla\"
       ]
      },
      {
       \"cell_type\": \"markdown\",
       \"id\": \"strong-estonia\",
       \"metadata\": {},
       \"source\": [
        \"# first text\"
       ]
      },
      {
       \"cell_type\": \"markdown\",
       \"id\": \"aquatic-stopping\",
       \"metadata\": {},
       \"source\": [
        \"<div style=\\\"background-color: #1A079B; width:100%\\\" >\\n\",
        \"<h2 style=\\\"margin: auto; padding: 20px; color:#fff; \\\">2 - test </h2>\\n\",
        \"</div>\"
       ]
      },
      {
       \"cell_type\": \"code\",
       \"execution_count\": 1,
       \"id\": \"efficient-grass\",
       \"metadata\": {},
       \"outputs\": [],
       \"source\": [
        \"import os\"
       ]
      },
      {
       \"cell_type\": \"code\",
       \"execution_count\": 2,
       \"id\": \"architectural-membership\",
       \"metadata\": {},
       \"outputs\": [],
       \"source\": [
        \"path_actuel = os.getcwd()+\'/documentation/test\'\\n\",
        \"filename = \\\"test.ipynb\\\"\\n\",
        \"output_name = \\\"test.html\\\"\"
       ]
      },
      {
       \"cell_type\": \"code\",
       \"execution_count\": 3,
       \"id\": \"incomplete-above\",
       \"metadata\": {},
       \"outputs\": [
        {
         \"name\": \"stdout\",
         \"output_type\": \"stream\",
         \"text\": [
          \"o path_actuel: /opt/continuum/project/documentation/test \\n\",
          \"o filename: test.ipynb \\n\",
          \"o output_name: test.html\\n\"
         ]
        }
       ],
       \"source\": [
        \"print(\'o path_actuel:\', path_actuel, \'\\\\no filename:\', filename, \'\\\\no output_name:\', output_name)\"
       ]
      },
      {
       \"cell_type\": \"code\",
       \"execution_count\": 4,
       \"id\": \"olympic-magnitude\",
       \"metadata\": {},
       \"outputs\": [],
       \"source\": [
        \"p1 = path_actuel+\'/\'+filename\\n\",
        \"p2 = path_actuel+\'/\'+output_name\"
       ]
      },
      {
       \"cell_type\": \"code\",
       \"execution_count\": 5,
       \"id\": \"fundamental-screening\",
       \"metadata\": {},
       \"outputs\": [
        {
         \"name\": \"stdout\",
         \"output_type\": \"stream\",
         \"text\": [
          \"o p1: /opt/continuum/project/documentation/test/test.ipynb \\n\",
          \"o p2: /opt/continuum/project/documentation/test/test.html\\n\"
         ]
        }
       ],
       \"source\": [
        \"print(\'o p1:\', p1, \'\\\\no p2:\', p2)\"
       ]
      },
      {
       \"cell_type\": \"code\",
       \"execution_count\": 6,
       \"id\": \"lesbian-pizza\",
       \"metadata\": {},
       \"outputs\": [
        {
         \"name\": \"stdout\",
         \"output_type\": \"stream\",
         \"text\": [
          \"[NbConvertApp] Converting notebook /opt/continuum/project/documentation/test/test.ipynb to html\\n\",
          \"[NbConvertApp] Writing 574385 bytes to /opt/continuum/project/documentation/test/test.html\\n\"
         ]
        }
       ],
       \"source\": [
        \"!jupyter nbconvert $p1 --to html --output $p2\\n\",
        \"# !jupyter nbconvert $p1 --to html --output $p2\\n\"
       ]
      },
      {
       \"cell_type\": \"code\",
       \"execution_count\": null,
       \"id\": \"competitive-isolation\",
       \"metadata\": {},
       \"outputs\": [],
       \"source\": []
      }
     ],
     \"metadata\": {
      \"kernelspec\": {
       \"display_name\": \"Python 3 [anaconda202011_py38]\",
       \"language\": \"python\",
       \"name\": \"anaconda-project-anaconda202011_py38-python3\"
      },
      \"language_info\": {
       \"codemirror_mode\": {
        \"name\": \"ipython\",
        \"version\": 3
       },
       \"file_extension\": \".py\",
       \"mimetype\": \"text/x-python\",
       \"name\": \"python\",
       \"nbconvert_exporter\": \"python\",
       \"pygments_lexer\": \"ipython3\",
       \"version\": \"3.8.5\"
      }
     },
     \"nbformat\": 4,
     \"nbformat_minor\": 5
    }

如果有人有更正的想法!

  • 您在哪里/如何渲染转换后的笔记本的 HTML 版本?你在这里看到的让我想起了this report。在那篇文章中链接了an issue,建议查看nbviewer如何处理它。但是,由于没有一致的结果,我并没有抱太大希望。Similar report here 以及,但是,那里并没有明确触发因素。

标签: html jupyter-notebook tags file-conversion


【解决方案1】:

Kludge 解决方法

我找到了一种方法来获得我认为您希望使用提供的测试笔记本代码作为起点的结果。我确认无论您是使用“File”菜单>“Save and Export Notebook as...”将笔记本保存为 HTML 还是使用笔记本中的“!jupyter nbconvert”命令,它都可以正常工作。

首先在您提供的笔记本的笔记本视图中进行编辑,我将您包含 HTML 的降价单元格制作为代码单元格。然后我添加了单元格魔术代码%%html 作为HTML 内容上方每个新代码单元格的第一行。尽管您现在拥有输入代码,但运行此结果会得到与您相同的视图。或者,您可以根据需要在笔记本渲染中折叠它;然而,如果您的目标只是 HTML 呈现的结果,那就没有意义了.

现在,您可以使用自己的方式或“FIle”菜单将修改后的笔记本转换为 HTML。如果您查看在浏览器或 JupyterLAb 中生成的 HTML 文件,您会看到它的单元格现在再次垂直。除了添加产生降价的代码单元之外,您现在拥有了您想要的东西。幸运的是,从 HTML 中删除代码单元很容易。例如,从代码单元格的顶部示例中,您在 HTML 文件中删除此代码块:

<div class="jp-InputPrompt jp-InputArea-prompt">In&nbsp;[2]:</div>
<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
     <div class="CodeMirror cm-s-jupyter">
<div class=" highlight hl-ipython3"><pre><span></span><span class="o">%%html</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;background-color: #1A079B; width:100%&quot;</span> <span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;margin: auto; padding: 20px; color:#fff; &quot;</span><span class="p">&gt;</span>1 - Test <span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</pre></div>

     </div>

换句话说,对应于起始&lt;div class="jp-InputPrompt jp-InputArea-prompt"&gt; 并以与div class="CodeMirror cm-s-jupyter"&gt; div 匹配的缩进&lt;/div&gt; 结束的部分。

使用 '%%html' 作为在生成的 HTML 中查找要删除的部分的方法很好。

你为两者都这样做,你就会得到你想要的。

我知道这似乎很不方便;然而,如果您在初始降价代码中使用的 HTML 足够一致,我怀疑这个过程可以编写脚本。(我会使用 nbformat 执行将 HTML 代码从 markdown 单元格移动到带有 %%html 标记的代码单元格的步骤,然后我怀疑使用正则表达式迭代 find 和 delete 将适用于生成的 HTML 文件。)您的测试笔记本非常一致,因为降价单元格的内容都以&lt;div style= 开头。您正在使用的所有笔记本都是这种情况吗?

【讨论】:

    猜你喜欢
    • 2017-09-06
    • 1970-01-01
    • 2012-05-13
    • 1970-01-01
    • 2023-03-06
    • 2022-01-13
    • 1970-01-01
    • 1970-01-01
    • 2017-05-07
    相关资源
    最近更新 更多