Question

我的问题与出版自备笔记本的愿望有关

我的笔记本中有一个Markdown单元格，它引用了一个外部图像文件

so far

![](example.svg "Example")

so good

是否可以在MD单元格中内联文件内容？

Answer 1

此方法不需要互联网连接......

base64编码<ul class="list-unstyled"> <li>Username <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"> <img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></li> <li>Username <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"><img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></li></li> <li>Username <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"><img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></li></li> <li>Username<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"><img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></li></li> <li>Username<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"><img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></li></li> <li>Username<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"><img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></li></li> <li>Username<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"><img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>标记（例如，在base64encode.org粘贴svg）
对base64编码的字符串进行URL编码（例如，在urlencoder.org粘贴base64字符串）
将结果字符串放在<svg>

结果将是一个类似于以下的字符串，可以插入到Jupyter Notebook Markdown单元格中......

![alt text](data:image/svg+xml,<paste_your_svg_string_here> "title")

Answer 2

如果有人有兴趣，这就是我分享自备笔记本所做的事情。

我的半生不熟的解决方案是拆分Markdown单元格并插入代码单元格 display(HTML(open('example.svg').read()))
替换Markdown指令![](example.svg "Example")。

因为文件内容存储在输出单元格中，所以保存的笔记本可以使用像nbviewer这样的服务以自包含的方式共享，并具有其所有限制。如果有人选择下载我的笔记本，他们也可以下载我的SVG代码，不是吗？

OTOH，如果我使用像Microsoft Azure Notebooks这样的服务共享（至少在当前，2017年春季，＆＃34;预览＆＃34; 化身允许任何拥有微软的人帐户与我的笔记本进行交互）任何试图运行该代码单元的人都会受到伤害 - 但是可以使用指向通过HTTP提供的文件的Markdown图像指令来实现交叉托管解决方案。但是这个交叉主机是我在第一时间试图避免的......不要问我为什么： - （...

Answer 3

是的，可以在jupyter笔记本中包含SVG图像。

使用降价语法：

![Alt text](https://mirrors.creativecommons.org/presskit/logos/cc.logo.svg)

使用HTML ：

<img style="float: right;" src="https://mirrors.creativecommons.org/presskit/logos/cc.logo.svg">

我在Jupyter Notebook Server版本4.3.1

在markdown单元格中内联svg图像

3 个答案: