Как преобразовать ноутбук iPython в HTML с рухнутым выходом (и / или входом)
-
26-12-2019 - |
Вопрос
У меня есть генеракодицетагкод, я хотел бы поделиться с коллегами, которые могут не установить iPython.
Поэтому я преобразовал его в HTML с:
ipython nbconvert my_notebook.ipynb
.
Но моя проблема в том, что у меня очень длинные выходы, которые делают чтение сложно, и я хотел бы знать, возможно ли возможность иметь вариант коллапса или прокрутки просмотра ноутбука на версии HTML.
Но в версии HTML.Это даже возможно?
Спасибо за помощь!
Решение
Я нашел то, что хотел, благодаря этому, благодаря этому Блог Что именно то, что я хотел.
Я немного изменил его, чтобы сделать его работать с iPython 2.1 [Редактировать: Работает ASLO с Jupyter], и смешивают входные и вывод скрытых трюков.
Что это делает:
При открытии файла HTML все вход будут отображаться и вывод скрыты. Нажав на поле ввода, он покажет поле вывода. И как только у вас есть оба поля, вы можете скрыть один, нажав на другой.
Редактировать: теперь он скрывает длинный вход, а около 1 строки всегда отображается (от defa. Вы можете показать все, нажав на номер ввода. Это удобно, когда у вас нет вывода (например, определение длинного Функция, которую вы хотите спрятаться в вашем HTML Doc)
Вам нужно добавить шаблон при выполнении NBConvert:
ipython nbconvert --template toggle my_notebook.ipynb
.
Где переключатель - это файл, содержащий:
{%- extends 'full.tpl' -%}
{% block output_group %}
<div class="output_hidden">
{{ super() }}
</div>
{% endblock output_group %}
{% block input_group -%}
<div class="input_hidden">
{{ super() }}
</div>
{% endblock input_group %}
{%- block input -%}
<div class="in_container">
<div class="in_hidden">
{{ super() }}
<div class="gradient">
</div>
</div>
</div>
{%- endblock input -%}
{%- block header -%}
{{ super() }}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
div.output_wrapper {
margin-top: 0px;
}
.output_hidden {
display: block;
margin-top: 5px;
}
.in_hidden {
width: 100%;
overflow: hidden;
position: relative;
}
.in_container {
width: 100%;
margin-left: 20px;
margin-right: 20px;
}
.gradient {
width:100%;
height:3px;
background:#eeeeee;
position:absolute;
bottom:0px;
left:0;
display: none;
opacity: 0.4;
border-bottom: 2px dashed #000;
}
div.input_prompt {
color: #178CE3;
font-weight: bold;
}
div.output_prompt {
color: rgba(249, 33, 33, 1);
font-weight: bold;
}
</style>
<script>
$(document).ready(function(){
$(".output_hidden").click(function(){
$(this).prev('.input_hidden').slideToggle();
});
$(".input_hidden").click(function(){
$(this).next('.output_hidden').slideToggle();
});
var slideHeight = 25;
$(".in_container").each(function () {
var $this = $(this);
var $in_hidden = $this.children(".in_hidden");
var defHeight = $in_hidden.height();
if (defHeight >= 61) {
var $prompt = $this.prev(".input_prompt");
var $gradient = $in_hidden.children(".gradient");
$in_hidden.css("height", slideHeight + "px");
$gradient.css("display", "block");
$prompt.click(function () {
var curHeight = $in_hidden.height();
if (curHeight == slideHeight) {
$in_hidden.animate({
height: defHeight
}, "normal");
$gradient.fadeOut();
}
else {
$in_hidden.animate({
height: slideHeight
}, "normal");
$gradient.fadeIn();
}
return false;
});
}
});
});
</script>
{%- endblock header -%}
.
В основном вы можете ввести любые JavaScript и CSS, которые вы хотите настроить свой ноутбук на волю!
весело!
Другие советы
iPython 2.0 теперь включает в себя сохранение в HTML непосредственно в ноутбуке.
Строки прокрутки были автоматически созданы с линиями> 100 в старой версии. Документы Если они все еще показывают, ваш HTML-вывод также должен иметьБары, нет?
Вы можете использовать код ниже, чтобы преобразовать свою ноутбук в HTML с кодом как рухнул.
from IPython.display import HTML
HTML('''<script>
code_show=true;
function code_toggle() {
if (code_show){
$('div.input').hide();
} else {
$('div.input').show();
}
code_show = !code_show
}
$( document ).ready(code_toggle);
</script>
<form action="javascript:code_toggle()"><input type="submit" value="Click here to toggle on/off the raw code."></form>''')
.