Ожидаемое поведение когда код отображается как код(и опционально )в спойлере в новом дизайне сайта в редакторе поста в режиме Markdown
Результат в примере из комментария выше тоже отображается как код так что наверное да,
должно было получиться что то похожее. но у меня получается это
длинный спойлер примерно 250килобайт 4 картинки и текст
В новом редакторе поста Markdown в новом дизайне
ссылка habr.com/ru/sandbox/new ( вроде бы работает только в новом дизайне)
////////////////////////////////////////////////////////////////////////////////////////////////
1пример «html code spoiler» из habr.com/ru/company/habr/blog/725748/#comment_25392264
////////////////////////////////////////////////////////////////////////////////////////////////
2пример из habr.com/ru/company/habr/blog/725748/#comment_25394714
////////////////////////////////////////////////////////////////////////////////////////////////
Тетовые комментарии в старом дизайне сайта 3 и 4
////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////
Ожидаемое поведение «Markdown» редактора поста в новом дизане на второй картинке
////////////////////////////////////////////////////////////////////////////////////////////////
Спойлер с видео (мне )не удавалась сделать в WYSIWYG редакторе поста до обновления сайта, код для спойлера с видео удалось «понять» и написать через редактор комментариев в старом дизайне сайта а вот сам код такого видео спойлера не удавалось отправить в новый редактор поста использующий Markdown, но пример из первой ссылки всё же«удобен»
так как его можно использовать для написания комментария в старом дизайне а второй пример ломается в старом редакторе комментариев в старом дизайне но работает в новом редакторе поста с Markdown
И так по кругу можно говорить…
Мы разобрались? потому что я уже не совсем понимаю зачем это:/
vconst «У меня все работает»
У меня тоже работает в комментариях но не получалось добавить блок в пост не в одном из (3)ёх вариантов
1) старый дизайн редактор поста ссылка habr.com/ru/sandbox/add/?hf=sandbox_wysiwyg ( вроде бы работает только в старом дизайне)
2)wysiwyg и 3)Markdown в новом дизайне ссылка habr.com/ru/sandbox/new ( вроде бы работает только в новом дизайне)
Но это уже не важно так как я тоже не внимательно читал «инструкцию» чтобы встроить блок кода можно использовать конструкцию
Далее пустуя строка
```xml
<spoiler title="Atlas Gets a Grip | Boston Dynamicsо">
<oembed>https://www.youtube.com/watch?v=-e1_QhJ1EhQ</oembed>
</spoiler>
```
Далее с новой строки
Где важно не забывать отделять «разметку» пустыми и новыми строчками (для примера можно сделать как в примере выше)
Но есть небольшая особенность, конструкция указанная выше вроде не работает в
старом дизайне сайта в комментариях с включенным режимом Markdown
результат
Далее пустуя строка
<!--<spoiler title="Atlas Gets a Grip | Boston Dynamicsо">-->
<oembed>https://www.youtube.com/watch?v=-e1_QhJ1EhQ</oembed>
<!--</spoiler>-->
Далее с новой строки
это код уже не вставить как надо, поэтому я использовал тег "source" и выключенный markdown
В общем всё, видео взято для примера, редактор комментариев в новом дизайне пока не сильно не крутил, этот комментарий писал дольше чем планировал, кнопки переходов в сарый и новый дизайн внизу страницы
Редактор кода поста это то что я искал некоторое время назад а сегодня ещё раз зашел и нашел ^_^
Думал что я его пропустил ранее но потом заметил этот пост и в общем я рад,
Но пока не получилось добавить HTML блок кода, пока что конструкция ниже всё ещё формулируется с использованием «старого» дизайна и редактора комментариев с отключённым Markdown а в пост вставляется как исполняемый не отображаемый код…
Вот этот код сейчас не получается добавить в пост что бы он отображался как код (спойлер нажми здесь чтоб развернуть, и попробуй скопировать его в редактор поста если хочешь проверить результат )
<spoiler title="html code spoiler">
<source lang="xml">
<b>Все видео из статьи(?) в режиме встроенного плеера спрятанные в спойлеры</b>
(<i>этот список позволяет не открывать каждый раз новую страницу для просмотра видео</i>)
<spoiler title="Nachbau des Kempelenschen Sprechapparats">
<oembed>https://www.youtube.com/watch?v=oIjkzZGe2I8</oembed>
</spoiler>
<spoiler title="Utterance robot finally got the same voice as humans">
<oembed>https://www.youtube.com/watch?v=HmSYnOvEueo</oembed>
</spoiler>
<spoiler title="Полет валькирий">
<oembed>https://www.youtube.com/watch?v=xVxLLDqzjBc</oembed>
</spoiler>
<spoiler title="Нарисованный звук - Вариофон. Киматика - Cartoon sound - Variofon. Cymatics">
<oembed>https://www.youtube.com/watch?v=OB4vs6qioJ4</oembed>
</spoiler>
<spoiler title='Рисованный звук, "Танец вороны" '>
<oembed>https://www.youtube.com/watch?v=naZlqBtd2Dk</oembed>
</source>
</spoiler>
В примеревсё завернуто в тег спойлера для демонстрации он наверное не нужен но без него результат не меняется...
Собирался это отметить через личное сообщение автору JetHabr
добавив как можно сделать приведённый ниже пример но «приемлемый» результат пока что удалось достичь только через редактор комментариев в старом дизайне сайта поддерживавший редактирование кода и предпросмотр...
Все видео из статьи(?) в режиме встроенного плеера спрятанные в спойлеры
(этот список позволяет не открывать каждый раз новую страницу для просмотра видео)
Nachbau des Kempelenschen Sprechapparats
Utterance robot finally got the same voice as humans
Пример того как это можно организовать в виде кода для старого редактора комментариев
(для создания «блока с кодом» в редакторе был выключен Markdown )
Нажми здесь чтобы посмотреть "блок с кодом"
<b>Все видео из статьи(?) в режиме встроенного плеера спрятанные в спойлеры</b>
(<i>этот список позволяет не открывать каждый раз новую страницу для просмотра видео</i>)
<spoiler title="Nachbau des Kempelenschen Sprechapparats">
<oembed>https://www.youtube.com/watch?v=oIjkzZGe2I8</oembed>
</spoiler>
<spoiler title="Utterance robot finally got the same voice as humans">
<oembed>https://www.youtube.com/watch?v=HmSYnOvEueo</oembed>
</spoiler>
<spoiler title="Полет валькирий">
<oembed>https://www.youtube.com/watch?v=xVxLLDqzjBc</oembed>
</spoiler>
<spoiler title="Нарисованный звук - Вариофон. Киматика - Cartoon sound - Variofon. Cymatics">
<oembed>https://www.youtube.com/watch?v=OB4vs6qioJ4</oembed>
</spoiler>
<spoiler title='Рисованный звук, "Танец вороны" '>
<oembed>https://www.youtube.com/watch?v=naZlqBtd2Dk</oembed>
</spoiler>
Ваш код не запустился из консоли в FireFox скорее всего из за использования внешних библиотек,
я минимально изменил его:
$(document).ready(function(){});
//заменил на
(function(){})();
//что за скобки? https://developer.mozilla.org/ru/docs/Словарь/IIFE
$('body').append('<canvas id="C" width="'+(R*2)+'" height="'+(R*2)+'">');
//заменил на
document.body.innerHTML=('<canvas id="C" width="'+(R*2)+'" height="'+(R*2)+'"></canvas>');
//appendChild() требовал больше изменений, document.write() запускался только поверх открытой страницы но не "новой вкладки"
Код с дополнениями
(function(){
var R=1024; var D=2*R;
var rgb = function(c){
if(c.length<=6) return c+("0".repeat(6-c.length));
else return c.substring(0, 3)+c.substring(c.length-3);
}
document.body.innerHTML=('<canvas id="C" width="'+(R*2)+'" height="'+(R*2)+'"></canvas>');
var canvas = document.getElementById('C');
var ctx = canvas.getContext('2d');
ctx.fillStyle="#ffffff00";
ctx.fillRect(0, 0, 256, 256);
for(var x = 0;x<D;x++) {
for(var y = 0;y<D;y++) {
var X1 = R-x;
var Y1 = R-y;
var X2 = R+x;
var Y2 = R+y;
if (( x*x+y*y ) <= R*R ) {
ctx.fillStyle="#"+( rgb( (x*x+y*y).toString(16)) );
ctx.fillRect(X1, Y1, 1, 1);
ctx.fillRect(X1, Y2, 1, 1);
ctx.fillRect(X2, Y1, 1, 1);
ctx.fillRect(X2, Y2, 1, 1);
} } }
})();
Результат в примере из комментария выше тоже отображается как код так что наверное да,
должно было получиться что то похожее. но у меня получается это
ссылка habr.com/ru/sandbox/new ( вроде бы работает только в новом дизайне)
////////////////////////////////////////////////////////////////////////////////////////////////
1пример «html code spoiler» из
habr.com/ru/company/habr/blog/725748/#comment_25392264
////////////////////////////////////////////////////////////////////////////////////////////////
2пример из
habr.com/ru/company/habr/blog/725748/#comment_25394714
////////////////////////////////////////////////////////////////////////////////////////////////
Тетовые комментарии в старом дизайне сайта 3 и 4
////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////
Ожидаемое поведение «Markdown» редактора поста в новом дизане на второй картинке
////////////////////////////////////////////////////////////////////////////////////////////////
Спойлер с видео (мне )не удавалась сделать в WYSIWYG редакторе поста до обновления сайта, код для спойлера с видео удалось «понять» и написать через редактор комментариев в старом дизайне сайта а вот сам код такого видео спойлера не удавалось отправить в новый редактор поста использующий Markdown, но пример из первой ссылки всё же«удобен»
так как его можно использовать для написания комментария в старом дизайне а второй пример ломается в старом редакторе комментариев в старом дизайне но работает в новом редакторе поста с Markdown
И так по кругу можно говорить…
Мы разобрались? потому что я уже не совсем понимаю зачем это:/
~_^"
Предпросмотр в редакторе постов в режиме Markdown просит сначала ввести в заголовок не менее 5 символов ...
Наверное было бы лучше если кнопка пред просмотра была активна всегда а кнопка публикации/"Далее к настройкам" работала только после ввода заголовка
У меня тоже работает в комментариях но не получалось добавить блок в пост не в одном из (3)ёх вариантов
1) старый дизайн редактор поста ссылка
habr.com/ru/sandbox/add/?hf=sandbox_wysiwyg ( вроде бы работает только в старом дизайне)
2)wysiwyg и 3)Markdown в новом дизайне ссылка
habr.com/ru/sandbox/new ( вроде бы работает только в новом дизайне)
Но это уже не важно так как я тоже не внимательно читал «инструкцию»
чтобы встроить блок кода можно использовать конструкцию
Где важно не забывать отделять «разметку» пустыми и новыми строчками (для примера можно сделать как в примере выше)
Но есть небольшая особенность, конструкция указанная выше вроде не работает в
старом дизайне сайта в комментариях с включенным режимом Markdown
результат
это код уже не вставить как надо, поэтому я использовал тег "source" и выключенный markdown
В общем всё, видео взято для примера, редактор комментариев в новом дизайне пока не сильно не крутил, этот комментарий писал дольше чем планировал, кнопки переходов в сарый и новый дизайн внизу страницы
~_^ Удачи!
Думал что я его пропустил ранее но потом заметил этот пост и в общем я рад,
Но пока не получилось добавить HTML блок кода, пока что конструкция ниже всё ещё формулируется с использованием «старого» дизайна и редактора комментариев с отключённым Markdown а в пост вставляется как исполняемый не отображаемый код…
В примере всё завернуто в тег спойлера для демонстрации он наверное не нужен но без него результат не меняется...
Браузер последний FireFox
Если вдруг интересен контекст примера то он взят и немного изменён отсюда:
habr.com/ru/company/jetinfosystems/blog/721304/#comment_25345560
добавив как можно сделать приведённый ниже пример но «приемлемый» результат пока что удалось достичь только через редактор комментариев в старом дизайне сайта поддерживавший редактирование кода и предпросмотр...
Все видео из статьи(?) в режиме встроенного плеера спрятанные в спойлеры
(этот список позволяет не открывать каждый раз новую страницу для просмотра видео)
Пример того как это можно организовать в виде кода для старого редактора комментариев
(для создания «блока с кодом» в редакторе был выключен Markdown )
я минимально изменил его:
Живой пример на jsfiddle.net/6wk2oe40