Павел Сайк

https://obsidian.md/

Встроенных средств для этого я не нашел

Как так? Создаете свой стиль, там настраивайте шрифт, отступы, табуляцию и тд. Вставляете текст и применяете к нему ваш стиль. Подстветка останется, если в стиле не переопределять цвет шрифта.


С номерами строк придется труднее — надо будет настроить свой стиль нумерации, и в созданном выше стиле абзаца указать, чтобы использовать эту нумерацию.


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



Скачать док: https://www.dropbox.com/s/8fvq11sw5k0tvky/example....

нашел решение без js

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

или

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

Hyphens просто не везде поддерживается https://developer.mozilla.org/en-US/docs/Web/CSS/h...
Альтернатива — использовать JS-библиотеку, например, https://github.com/mnater/hyphenator (демо mnater.github.io/Hyphenator)

Но, боюсь, из коробки он не знает четких правил переноса в русском языке.

На реддите пишут, что проблема в 11 поколении интеловских процессоров. Нашёл вот этот гайд.

Вкратце: зайдите в BIOS (F2 при загрузке), найдите там Advanced Mode (F7), на вкладке Advanced зайдите в VMD setup menu и поменяйте Enable VMD controller на Disabled. Потом через F10 сохраните изменения и перезагрузитесь. После этого всё должно быть ок.

Есть и вариант с установкой дополнительного драйвера, но нужен драйвер для Intel Rapid Storage Technology, а не для материнской платы. Ссылка есть в том же гайде, но лично я бы воспользовался первым вариантом.

Ты упоришься делать такую плавность и кривизну на CSS (тени, градиенты), а результат будет так себе.

обязательно писать &?

Нет

Цитирование — это конечно хорошо, но я не думаю, что удасться получить хорошие позиции ни в Гугле, ни в Яндексе. Причины:
1) В Гугле фильтр "Панда" за качество контента (отсутствие добавочной ценности) и за ворованный контент (то самое "цитирование", поисковик видет, что такой контент уже есть и он не ваш, поэтому извините, но ТОПов вам не видать).
2) В Яндексе это АГС и принцип работы у него такой же как и Панды — такой контент у нас уже есть, зачем нам ваш еще в ТОПе?
3) DMCA фильтр — фильтр за нарушение авторских прав.

Поэтому подумайте, оно вам надо? Может быть, в последствии, вы даже публиковать уникальный контент начнете, но индексироваться такой контент будет очень плохо и очень медленно, потому что ПС знает, что контент тут так себе и часто туда заходить не стоит)

Если убрать именно обводку/подсветку при ошибке ввода, то нужно определить правила для псевдокласса :invalid соответсвующего елемента.
Например:

input:invalid {
    box-shadow: none;
}

jsfiddle.net/r4mef13v/3
Про FF и рамки.

button:active, button:focus {
	outline: none;
}
button::-moz-focus-inner {
	border: 0;
}

Я бы рекомендовал попробовать сверстать собственный макет самостоятельно, к примеру, на том же bootstrap. На своем опыте оцените, есть ли недостатки.

Из правил:

1. Дизайн не должен мешать пользователю. Чем меньше шума, тем лучше. В идеале - ничего лишнего на экране. И как можно меньше анимации.
   
2. Функциональность превыше эффектов - сначала содержимое, только потом украшения
   
3. Мыслить от абстрактного к конкретному, мыслить модульно - чистый холст делим на части (в пропорциях), потом добавляем компоненты в виде сплошных фигур, потом детализируем компоненты. Так мыслит и верстальщик, и программист. Хранить компоненты в отдельных файлах.
   
4. Красивый дизайн - логичный дизайн. Все должно быть упорядоченно, иметь обоснованные размеры, отступы, цвета и эффекты
   
5. Постоянство - одна цветовая схема, пропорции, типографика, элементы
   
6. Стандарты и традиции. Поведение предсказуемо. Стрелка вниз на панели означает, что панель развернется вниз, а не вверх. Красный - опасное действие, зеленый - безопасное. Используйте стандартные иконки, вместо никому не знакомых.
   
7. Смотрите на дизайн чужими глазами - наложите черно-белый фильтр или размытие и убедитесь, что содержимое не растворилось, акценты на месте. Продумайте, что случится с колонкой или меню, если текста будет слишком много или мало.
   
8. Растровая графика для фотографий и многоцветных изображений. Все что может быть описано в векторе - делается в векторе.
   
9. На каждое правило бывают исключения
   

Книги и материлаы

1. Design for Hackers: Reverse Engineering Beauty - технический взгляд на элементы дизайна
   
2. Прочие книги по UX и web-design в списках бестселлеров amazon / ozon
   
3. behance и dribbble - для анализа лучших практик
   
4. Руководства по стилям: Google Material Design, Modern UI, Apple Human Interface Guidelines, ibm design. Тоже для анализа практик и правил для конкретной платформы.