Skip to content

Instantly share code, notes, and snippets.

@Yarakashi-Kikohshi
Last active September 8, 2021 14:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Yarakashi-Kikohshi/1670f2f0c169ad4971101bf4fa7dbae9 to your computer and use it in GitHub Desktop.
Save Yarakashi-Kikohshi/1670f2f0c169ad4971101bf4fa7dbae9 to your computer and use it in GitHub Desktop.
僕はTeXworks を使いこなしていない

僕はTeXworks を使いこなしていない

TeXworks はTeX Live にも同封されているTeX 用エディタである. 以下の公式ページからもダウンロードできる.

もちろん,ダウンロードしたままに利用することができる有能エディタですが,長く使っているとちょっとずつ不便さが出てくる. 特に明るいテーマであることは最たるものだと思われる.

今回,以下のカスタマイズを行ってみた.

  • テーマ
  • シンタックスハイライト

すると次のような感じになる.

texworks-dark

これを最終目標にカスタマイズした記録.

前提

  • Windows10
  • TeX Live
  • TeXworks 0.6.6

数年前の記事情報でも現時点で対応できたので,おおよそのTeXworks で対応できると思われる.

エディタのイメージを変更する

エディタのイメージはQt で指定されたCSS で記述できる. (と言いつつ,デフォルトのCSS ファイルを確認することが出来なかった)

Qt Style Sheets Examples | Qt 4.8

適当にオリジナルCSS を作成し,TeXworks を起動するときに以下のようにすれば良い. ファイルのディレクトリはどこでも良い.パスは絶対パスで指定しておこう.

$ texworks -stylesheet=<Pass_to_CSS_file>

これを毎回やっていると面倒なので,バッチファイルやショートカットを作成して簡単にしておくと良いだろう.

サンプルCSS (折りたたみ)

以下のQA からサンプルを引用しておきたい. かなり良い感じで暗いイメージになる.

How can I set a dark theme in TeXworks? - TeX - LaTeX Stack Exchange

dark-style.css などと保存して置けばよいだろう.

/*
    https://tex.stackexchange.com/questions/474170/how-to-change-the-color-of-editor-in-texworks?noredirect=1&lq=1
    */

QWidget { /* everything, basically */
    background-color: #3A3A3A;
    color: white;
}

QPushButton { /* buttons */
    background-color: #646464;
    border-style: inset;
    border-width: 1.5pt;
    border-color: white;
    padding: 4px;
}

QPushButton:pressed { /* after you press the button */
    background-color: #818181;
}

QTableView {
    background-color: #424242;
    alternate-background-color: #424242;
    selection-background-color: #818181;
    font-color:#FFFFFF;
}

/* QComboBox refers to drop-down menus (such as when selecting pdfTeX, pdfLaTeX, XeTeX, etc.) */

QComboBox {
    border: 1px solid gray;
    padding: 1px 18px 1px 3px;
    border-radius: 4px;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;
    border-left-width: 1px;
    border-left-color: #EEEEEE;
    border-left-style: solid; /* just a single line */
}

QComboBox::down-arrow:on {
    top: 5px;
    left: 5px;
}

/* QMenuBar refers to the menu at the top (File, Edit, etc.)
    QMenu::item refers to the items under the menu
    */

QMenu::item:selected { /* when user selects item using mouse or keyboard */
    background-color: #909090;
}

QMenuBar::item:pressed, QMenuBar::item:selected {
    background: #909090;
}

QTextEdit { /* text editor */
    background-color: black;
    color: white;
}

QScrollBar:vertical { /* vertical scroll bar */
    background: #424242;
    width: 10px;
    margin: 10px 0 10px 0;
}
QScrollBar::handle:vertical { /* the part of the scroll bar that gets dragged*/
    background: #AAAAAA;
    min-height: 20px;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    /* this seems useless, but it is actually quite important-
        it makes the scroll bar's background a uniform color instead
        of tiny dots, if it were removed. */
    background: none;
}

QScrollBar:horizontal { /* same thing, but horizontal */
    background: #424242;
    height: 10px;
    margin: 0 10px 0 10px;
}
QScrollBar::handle:horizontal { /* etc. */
    background: #AAAAAA;
    min-width: 20px;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

QTabBar::tab { /* tabs that lead to different displays (such as those under "Preferences") */
    background: #3A3A3A;
    border: #909090;
    padding: 2px 4px 6px 8px;
    /* now I can't remember how this padding works, but removing it leads to ugly tab designs*/
}

QTabBar::tab:hover {
    background: #818181;
}

QTabBar::tab:selected {
    background: #909090;
}

バッチファイルは以下のように作成する.

@echo off
start texworks -stylesheet="<Path_to_CSS_file>" %~1
exit /b 0

.tex の起動アプリをこのバッチファイルにすることも出来るが,アイコンがメモ帳と同じになってしまう. ちょっとダサい.

エディタのシンタックスハイライトを変更する

以下のファイルを書き変えることでシンタックスハイライトを変更することが出来る.

~\.texlive20**\texmf-config\texworks\configuration\syntax-patterns.txt

https://github.com/TeXworks/texworks/blob/master/res/resfiles/configuration/syntax-patterns.txt

簡単にカスタマイズ出来そう.また,正規表現を増やせばより良いシンタックスハイライトを得られそう.

VSCode like syntax-pattern (折りたたみ)

VSCode っぽいですが,あまり上手ではありません. また,末尾の空白などに赤下線が付くようにしました.

CSS も少し変更する必要があるので注意が必要.

dark-style.css

QTextEdit { /* text editor */
    background-color: #1E1E1E;
    color: #D4D4D4;
}

syntax-pattern.txt

[LaTeX]
# special characters
 #C586C0	N	[\$#\^\_\+\-&]

# line breaks
 #C586C0	N	\\\\

# brank
 #F44747;U	N	^\s{2,}(?!.)*$
 #F44747;U	N	\s+$

# numeric
 #B5CEA8	N	[0-9]

# LaTeX environments
 #9CDCFE	N	(?<=\\begin\{|\\end\{).*(?=\})
 #DCDCAA	N	\\(?:begin|end)

# LaTeX packages
 #DCDCAA	N	(?<=\\documentclass\[|\\usepackage\[)(?:.*|\n(?:.*\n)*\s?)(?=\])
 #C586C0	N	\\(?:documentclass|usepackage)

# control sequences
 #569CD6	N	\\(?:[\p{L}@]+|.)

# brace
 #4EC9B0	N	[\{\}\[\]\(\)]

# comments
 #6A9955;U	Y	%.*

[BibTeX]

# entries
 #DCDCAA	N	@[^{]+

# comments
 #6A9955	Y	%.*

# keys
 #569CD6	N	[a-zA-Z]+(?=\s*=)

Digression

シンタックスハイライト以外はだいたい出来る気がする.

デフォルトでイメージを選択出来るようにする方が良いというIssue は上がっており,これが実現されればより平易にイメージを変更することが出来るが,実際はまだそうはいかない.

Implement dark mode · Issue #932 · TeXworks/texworks

ちなみに,このIssue の中で挙がっているGoogle ドライブのCSS 等を利用すると一番きれいにダークモードにすることが出来る.ただし,ライセンス等不明瞭なのでこっそり.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment