vc.ru Konstantin Panphilov
3 442

Возможность вставлять код в статьи и новый раздел «Разработка»

Привет. Мы наконец-то доделали возможность вставлять код в материалы — нас периодически об этом спрашивали.

В закладки
Аудио

И раз уж появилась возможность вставлять код, то в качестве эксперимента мы открыли новый подсайт «Разработка» — на него не подписаны все по умолчанию, поэтому если вы хотите видеть обновления раздела, нужно зайти в него и подписаться:

Разработчики vc.ru и их друзья попробуют начать писать первые материалы — посмотрим, что из этого получится. Делитесь приёмами и образовательными материалами, знакомьтесь с другими разработчиками, системными администраторами, QA-специалистами и представителями других направлений.

Чтобы проще было делиться примерами кода, обсуждать баги и крутые решения, мы добавили в редактор инструмент «Код».

Нужно лишь вставить в окошко свой фрагмент.

Выглядеть в материале он будет так:

import Router from 'koa-router'; import pmongo from 'promised-mongo'; const router = new Router(); const db = new pmongo('localhost/my-app'); const dataRequired = function *(next) { if (typeof this.request.body['data'] === 'object') { yield next; } else { this.throw(400, 'Request data is required'); } };

Инструмент поддерживает подсветку синтаксиса для JavaScript, TypeScript, CSS, Stylus, C++, C #, Bash, Shell, JSON, Nginx, ObjectiveC, Swift, Java, PHP, Perl, SQL, Ruby, Go, XML. Если нужен другой язык — пишите, добавим.

{ "author_name": "Konstantin Panphilov", "author_type": "editor", "tags": [], "comments": 64, "likes": 69, "favorites": 14, "is_advertisement": false, "subsite_label": "team", "id": 55628, "is_wide": false, "is_ugc": false, "date": "Wed, 16 Jan 2019 14:18:54 +0300" }
{ "id": 55628, "author_id": 3, "diff_limit": 1000, "urls": {"diff":"\/comments\/55628\/get","add":"\/comments\/55628\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/55628"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199582, "possessions": [] }

64 комментария 64 комм.

Популярные

По порядку

Написать комментарий...
42

VC теперь не только Пикабу, но и Хабр (шутка)

Ответить
–1

VC — Хабр
Хабр — торт
Следовательно: VC — торт

Ответить
1

это был тонкий юмор про транзитивность? :)

Ответить
0

Слишком тонкий

Ответить
4

Отличная идея с этим новым разделом. Хочется даже что-то написать в этот раздел, но понятия не имею что именно )

Ответить
1

В приложении для iOS подсветка кода не работает

Ответить
10

В приложении для Android тоже, если вас это успокоит (скоро поправим 🙌)

Ответить
2

Да не особо я и переживаю за Android) Только лишь поделился наблюдением.

Ответить
4

Скоро будет поддерживаться

Ответить
1

хорошая шутка, Денис

Ответить
0

Так, и зачем нам это надо?

Ответить
10

Вам - не знаю, а нам надо

Ответить
0

Нам это пользователям с НУЛЁМ статей?

Ответить
1

Именно! Чтобы было где писать статьи

Ответить
7

Чтобы унижать тех кто не умеет в программирование.

Ответить
1

да ладн. нас сначала в школе гнобили - дайте хоть немного отыграться

Ответить
4

Чтобы текст отформатировать как кусок кода

Ответить
0

Так зачем это на VC, есть же профильные сайты для кодеров

Ответить
0

Тут часто проскакивают статьи вроде «Как запилить лендинг, но чтобы он не грузился 4 часа» и в таких постах примеры кода не помешают.

Ответить
0

Если нужен другой язык — пишите, добавим.

Добавьте подсветку для Rust.

Ответить
6

И для питона.

Ответить
2

В настройках игры увеличьте яркость, а вообще хорошая игра эта Rust

Ответить
0

Раз пошла такая пьянка, то и 1С тоже

Ответить
0

Требую паскаль.

Ответить
0

Только Паскаль 8000!

Ответить
0

Научите так цитировать в комментариях

Ответить
2

Kotlin

Ответить
2

Спасибо VC - у вас лучшая платформа в мире! Даже удобнее чем Medium!

Ответить
0

Было бы классно:
1. Картинку вставлять не через upload, а через past
2. Когда жмешь Backspace - то перескакивать на строчку выше при достижении начала строчки

Ответить
1

Надеюсь будут материалы про frontend и web

Ответить
0

Ты такой душный

Ответить
0

Ты в слове «клёвый» 4 опечатки допустил.

Ответить
0

Нет, не допустил

Ответить
0

Допустил

Ответить
1

Ты продолжаешь быть душным, не надо так.

Ответить
0

Ты продолжаешь допускать опечатки, не надо так.

Ответить
0

прошу прощения, мы с вами где-то кроме vc не встречались? очень уж стиль знакомый

Ответить
0

Хз. Я везде одинаково подписан (либо Nikolay Petyukh, либо mykmykpet), можешь походить по другим ресурсам посмотреть, пересекались ли.

Ответить
0

значит, не вы. Эх

Ответить
0

Можно продублировать третий раз ссылку? Не открывается

Ответить
0

Можно

Ответить
1

А что именно хотели бы почитать по этой теме?

Ответить
0

Какие нибудь фишки, авторское мнение и то что не часто пишут

Ответить
0

Не надо, этого добра в сети как грязи.

Ответить
0

Одно дело бездушные статьи где-то в интернете, а другое дело - теплые ламповые, от твоих няшек-соседей по vc.ru :3

Ответить
1

Хочу добавить пару идей для приложения.
1. Из статьи есть только кнопка назад, но нет кнопки домой. После десятка-другого прочитанных через рекомендации материалов быстро вернуться на главную=перезапустить приложение.
2..... Забыл. У меня такая память, минута, и снова "Здравствуйте!"

Ответить
0

И тёмную тему. Иначе скоро за вас это сделают солда... гугл

Ответить
0

/>>>while x:
... print(‘ti - kotik’)

Ответить
0

У Github есть какая-то фича, позволяющая gist'ы с него (это такой как бы репозиторий, но только для фрагмента кода) добавлять на сторонние сайты. Выглядит очень аккуратно и не надо было бы морочиться.

Ответить
0

То есть это такой embed?

Ответить
0

Ну вроде того. И там уже есть подсветка всех языков, что известны самому GitHub'у

Ответить
0

Денис может меня поправить, но нам вроде нравится не полагаться на сторонние разработки, от которых фиг знает, чего ждать

Ответить
1

Поэтому у нас есть Андропов который парсит другие сервисы, если нужно будет – добавим :)

Ответить
0

Scala!

Ответить
0

Было бы неплохо сделать отдельный сайт по типу хабра (благо они решили уйти в английскую аудиторию), получается тут хаб разработки, а на dtf разработка игр отдельно от vc

Ответить
0

Куда-куда они решили уйти? Появление англоязычной версии не значит, что Хабр «ушёл в английскую аудиторию».

Ответить
0

Мне показалось так из этого комментария:
"но мы исходим из того, что доля англоязычного контента в будущем будет доминировать, просто потому что такой аудитории больше."

Ответить
0

Ну возможно. Русскоязычная аудитория при этом никуда не девается.

Ответить
0

«Инструмент поддерживает подсветку синтаксиса для JavaScript, TypeScript, CSS, Stylus, C++, C #, Bash, Shell, JSON, Nginx, ObjectiveC, Swift, Java, PHP, Perl, SQL, Ruby, Go, XML. Если нужен другой язык — пишите, добавим».

Дык Python же!

Ответить
0

Сегодня как раз опробовал вставку кода в рамках своей статьи.

В целом работает хорошо. Подсветка кода отсутствует, но то специфика форматирования Shell-команд. Хотелось бы иметь возможность задавать язык программирования для блока, потому что ой как я не уверен, что с расширением количества языков автоформаттер будет отрабатывать 100% корректно во всех случаях.

Чего реально не хватало - возможности вставить кусок кода inline, то есть посреди текста. К примеру, в статье пишется про команду в шелле, которую хочется визуально выделить для удобства читателя. В Markdown это делается вот так: `echo "HELLO WORLD"`. А в отсутствие возможности приходится выделять курсивом или "маркерным выделением", что несколько не то, потому что маркерное выделение вообще для другого предназначено.

Ну и из совсем сумасшедших идей - сделать импорт из Markdown или reStructured text. Структура блоков и выделений у них и визуального редактора схожая, для публикации я сделал копию из Markdown Preview, большая часть форматирования осталась на месте. Но не вся. В случае с большими статьями это избавило бы от геморроя с детальной проверкой форматирования в предпросмотре.

P.S. А сама идея хаба - вообще отличная. На vc.ru немало разработчиков, и им есть о чём сказать, я уверен.

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }