Статья для новичков, которые только начинают писать на Хабре и, как и я, столкнулись с некоторыми неудобными моментами в интерфейсе.

Итак, что мне не понравилось при написании статей в Хабрахабр:

  • Самая важная панелька (где расположены заголовки, жирный шрифт и тд) уезжает наверх, по мере того, как ты пишешь статью, а мы, не в твиттере, зачастую приходится писать статьи и больше 140 символов)

  • Пока не победил, но бесит — тег source, который не выставляет автоматом язык, при том, что вам надо выбрать хабы, куда вы собираетесь писать

Я гуглил, я смотрел статьи по поводу как писать на Хабр. Я читал рекомендации как писать на Хабр.
Но заметил один неприятный момент в интерфейсе, который оказалось просто решить. Поэтому решил поделиться им с вами.

Как уже говорил выше, когда пишешь длинную статью, бесит то, что самая важная панелька в редакторе (H, B, I, U и тд) уходит наверх. Чтобы приструнить ее, надо сделать следующее:

  1. Установить расширение Stylish (для гугл хром) или любое другое расширение, позволяющее вам применять пользовательские стили к какому-либо сайту.

  2. В браузере перейти по адресу chrome://extensions/, найти там Stylish и нажать «Параметры».

  3. Слева нажать «Создать стиль», в окошке слева забить следующий код (можно менять, играться и смотреть как все меняется)

    .ochko-editor__toolbar {
        position:fixed;
        background-color:black;
        top:10px;
        margin-top: 20px;
        z-index: 10000;
        width: 780px;
    }

  4. Ниже textarea будет настройка «Применить к», там указываем «habrahabr.ru/topic/add»

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


Прокручиваем дальше:


Если вы установите расширение Stylish, там уже сохранен стиль, который называется habr, с аналогичными настройками.
Поделиться с друзьями
-->

Комментарии (16)


  1. HedgeSky
    17.05.2017 23:37
    +6

    Скрин с экрана редактирования статьи. Внутри текстового поля есть прокрутка, кнопки самого редактора всегда наверху и доступны. Что я делаю не так?


    1. oWart
      18.05.2017 07:41
      +2

      Аналогично… Это автор что-то делает не так.


  1. Barafu
    17.05.2017 23:59
    +9

    Как написать статью на гиктаймс за два клика:


    1. Заходим на https://yandex.ru/referats/
    2. Ctrl + C
    3. Заходим на гиктаймс
    4. Ctrl + V

    Получится не очень хорошо, но не хуже среднего уровня.


    1. klylex
      18.05.2017 09:24

      Тут больше двух кликов.


      1. alexoron
        18.05.2017 23:27

        Можно с помощью какого-то Autoclickerа сгенерировать программку, которая будет запускаться двойным щелчком или добавить в автозагрузку)))


  1. Siemargl
    18.05.2017 00:22
    +2

    Редактор Хабра настолько удобный, что любой сайтописатель сделает все запросто.

    Жаль только, не все писатели владеют html.

    Потому предлагаю принудительно ввести LaTeX-формат. Чтобы уж никому не было обидно.


    1. saluev
      18.05.2017 11:34
      +1

      Есть же Markdown.


  1. LoadRunner
    18.05.2017 08:14

    Я думал, тут будет простой и удобный GUI для создания математических формул.
    У меня, кстати, тоже никуда панелька из окна редактирования не уезжает, а набирать теги html вручную не сложно. Раз уж я не ленюсь до буквы ё тянуться, то и раскладку переключить не влом.


    1. den_golub
      18.05.2017 10:13

      Опасный Вы человек, букву «ё» используете.))


      1. LoadRunner
        18.05.2017 10:18
        +4

        Опаснее только тот, кто её в кавычки помещает :)


  1. alex87is
    18.05.2017 10:07

    Я когда писал свою первую статью, сначало в Ворде, думал, ну ок, потом 5 мин перенесу на Хабр. Там же навернека удобный редактор. И тут как будто попал в 19 век))))))) перенести статью, сделать ее красивой заняло просто тонну времени. Постоянно надо было проверять результат, эти HTML тэги… пока не будет нормального редакторы, сюда больше писать не буду.


    1. den_golub
      18.05.2017 10:16

      давайте так я из Html, когда первый раз писал статью использовал 3 тэга

      • тег p
      • тег cut
      • тег img


      UPD: ещё теги для списка, усе


      1. alex87is
        18.05.2017 14:20

        <'a href…
        <'p>
        <'h2>, <'h3...>
        <'b>
        <'i>
        <'img src…
        <'source>
        … ну может еще есть там тег или два который мне в эту секунду не вспомнился…
        Но и это не главная головная боль. То что не видно сразу результата, и на при помощи <'br>(?) контролировать новые абзацы, постоянно идти в предпросмотр… это же капец. Мы же в 21 веке)))


        1. den_golub
          18.05.2017 14:33

          Ну ладно вам я на вскидку сказал, по сути я только <'p> <'br> <'img src… и списки сам писал, остальное то типа <'b> <'i> <'h2>, <'h3...> <'a href… это уже из функций редактора, имелось в виду то что самому приходится прописывать не так много тегов и тегов не так много как кажется


      1. alex87is
        18.05.2017 14:26

        А ну и загрузка картинок, это вообще 15 век)))
        Должно решаться 3 кликами — вставить картинку, выбрать в браузере, нажать ок.


  1. kvaps
    18.05.2017 10:45
    +1

    1. Выбираем Markdown
    2. ...
    3. PROFIT