Qiita의 투고 화면을 만나 보았다

투고 화면이 미묘하게 사용하기 어려운 생각이 들었기 때문에 Fuck 해 보았습니다.

북마크릿등에서도 할 수 있을 것입니다만, 그 때마다 실행도 번거롭기 때문에 Chrome 확장을 이용하고 있습니다.

Stylus - Chrome 웹 스토어
CSS 참을 수 있다면 여러가지 자신 취향에 할 수 있어 편리합니다.

스타일 설정

적용 대상 : 정규 표현식과 일치하는 URL https?://qiita.com/draft.*?/edit\b.*

/** プレビューペイン **/
div.qa-MdContent,
div.it-MdContent {
  white-space: nowrap;       /* 折り返さない */
  transform: scale(0.75);    /* 縮小表示:75% */
  transform-origin: 2em 2em; /* 縮小位置調整 */
}
div.it-MdContent.slide_preview {
  white-space: initial;  /* スライドモードは普通に */
  transform: none;
}

/** 編集ペイン **/
textarea[class^="MarkdownEditorBody"],
textarea.editorMarkdown_textarea {
  white-space: pre;        /* 折り返さない */
  tab-size: 2;             /* TAB文字幅:2 */
  overflow: scroll !important; /* 横スクロール出して */
  /* 好みのフォントで編集したい */
  font-family: "FONT-NAME",Consolas,Liberation Mono,Menlo,Courier,monospace;
}

하고 싶었던 일

편집 화면

자동 접기 비활성화
투고용으로 코드 수정할 때, 매우 보기 힘들었기 때문에.

TAB 문자 폭 변경 · 표시 폰트 변경
단순히 선호하는 문제입니다.

미리보기 화면

자동 접기 비활성화
표시 폭 절반이라면 실제 기사 이상으로 접히므로.

축소 표시화
프리뷰라면 실치수가 없어도 좋을까~라고.