Как улучшить Roam research с помощью css и javascript
какими стилями и скриптами я пользуюсь
Цветные блоки
Можно выделить не только части текста, но целые блоки различными цветами.
Ставите #chld: если хотите, чтобы цветным был только дочерний блок, если родительский #blck: родительский и дочерний: #blck-chld:
После двоеточия указываете цвет red, blue или green.
Чтобы выделить родительски и дочерний блок синим цветом, я напишу:
#blck-chld:blue Текст родительского блока.
Текст дочернего блока.
Код:
/* this code hides all block tags */[data-tag^=”chld:”],
[data-tag^=”blck-chld:”],
[data-tag^=”blck:”] {
display:none;
}[data-tags~=”blck:red”],
[data-tags-up~=”blck-chld:red”],
[data-tags-up~=”chld:red”] > div:nth-child(2) { /* color: #721c24;*/ background-color: #f8d7da;
border: 1px solid #f5c6cb;
margin-bottom: 5px;
}[data-tags~=”blck:blue”],
[data-tags-up~=”blck-chld:blue”],
[data-tags-up~=”chld:blue”] > div:nth-child(2) { /* color: #004085;*/
background-color: #cce5ff; /*border-color: #b8daff;*/
border: solid 1px #b8daff; /*border-color: #80BDFF;*/
margin-bottom: 5px;
}[data-tags~=”blck:green”],
[data-tags-up~=”blck-chld:green”],
[data-tags-up~=”chld:green”] > div:nth-child(2) { /* color: #155724; */
background-color: #d4edda;
border: 1px solid #c3e6cb;
margin-bottom: 5px;
}[data-tags~=”blck:yellow”],
[data-tags-up~=”blck-chld:yellow”],
[data-tags-up~=”chld:yellow”] > div:nth-child(2) { /* color: #856404; */
background-color: #fff3cd;
border: 1px solid #ffeeba;
margin-bottom: 5px;
}
Источник: https://roamresearch.com/#/app/CatoMinor-public/page/Hjcemzax9
Оформление тегов
Сначала у меня были цветные теги, но потом я решил, что они не должны сильно, но и оставаться заметными. Поэтому добавил серый цвет и скругленную рамку.
код:
.rm-page-ref-tag {
box-shadow: 0px 1px 2px 1px #ACACAC;
padding: 1px 4px 1px 1px;
border-radius: 6px;
color: #44444472;
background-color: #FDFDFD;
}.rm-page-ref-tag:hover {
box-shadow: 0px 0px 0px 1px #514F4F77;
color: #37323272;
}
При наведении ощущение, что тег погружается, словно кнопка.
Можно сделать, чтобы выделялись еще и отдельные теги.
код:
.rm-page-ref-tag[data-tag="читать"] {
background-color: #8BC34A;
color: rgb(253,252,252);
font-weight: bold;
border-radius: 5px;
border: 1px solid #FFFFFF;
padding: 1px 5px 2px;
}.rm-page-ref-tag[data-tag="читать"]:hover {
background-color: #6A9539;
color: rgb(253,252,252);
font-weight: bold;
border-radius: 5px;
border: 1px solid #FFFFFF;
padding: 1px 5px 2px;
}
Подчеркивание ссылок
Мне удобней, когда внутренние ссылки подчеркнуты. Иногда использую такую конструкцию [[[[ссылка]]ссылка]]. Без подчеркивания можно запутаться.
Выделение цитат
Маркдаун-тег для выделения цитат не поддерживается, вместо него можно использовать теги и css.
Ставите в конце блока #bq и весь блок выделяется как цитата. При этом сам тег не виден, пока не перейдете в редактирование блока.
код:
[data-tags~=”bq”] {
background-color: rgb(244,242,242);
border-left: 5px solid rgb(255,204,111);
padding-left: 10px;
}[data-tag=”bq”] {
display:none;
}
Можно создать страницу bq, и она в Unlinked References будет собирать все цитаты.
Подобное я делаю и с выделенными строками. Создаю страницу ^^ и весь текст, который я где-ниюудь выделил, попадает на эту страницу.
Галерея
Можно улучшить просмотр изображений с помощью javascript. Нажимаете на изображение и оно увеличивается, при этом фон затемняется.
Roam42
У меня еще установлен Roam42. В нем полно фишек. Просмотр внутренних ссылок, без перехода с возможностью редактирования во всплывающем окне, конвертация блоков, веб-превью, автозавершение, удобный переход по датам.
Чтобы разобраться в css для Roam research, почитайте посты Cato Minor и эти уроки:
Roam with Style — CSS for Roam (1. lesson)
CSS for Roam (4. lesson): Pseudo-classes.
У Victor Tabori есть еще много скриптов, которые улучшают взаимодействие с мобильной версией Roam research.
