Today, ChatGPT code window now a different color (and its not as good) !?

ChatGPT
9

Вот быстрое решение, которое я придумал:

  1. Установите расширение “CustomCSS Injector”, или любое другое аналогичное.
  2. Вставьте следующий CSS код соответсвующее в поле, например “Edit Custom CSS” как в случае с расширением выше:
div.group\/conversation-turn:not(.agent-turn) pre.overflow-x-auto::before {
  display: inline-flex;
  align-items: center;
  justify-content: start;
  height: 2.25rem;
  padding: 0 1rem 0 1rem;
  border-radius: .375rem .375rem 0 0;
  content: "text";
  color: #b4b4b4;
  font-family: ui-sans-serif,-apple-system,system-ui,Segoe UI,Helvetica,Apple Color Emoji,Arial,sans-serif,Segoe UI Emoji,Segoe UI Symbol;
  font-size: .75rem;
  line-height: 1rem;
  user-select: none;
}
div.group\/conversation-turn:not(.agent-turn) pre.overflow-x-auto {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e3e3e3;
  border-radius: .375rem .375rem 0 0;
  color: #ececec;
  opacity: 0.990;
  background: linear-gradient(to bottom,
                              #2f2f2f 0%,
                              #2f2f2f 2.25rem,
                              #0d0d0d 2.25rem,
                              #0d0d0d 100%); /*#0b0b0b*/
  scrollbar-color: #424242 transparent;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.text-token-text-secondary.bg-token-sidebar-surface-primary {
	color: #b4b4b4;
	background: #2f2f2f;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 {
  color: #ececec;
  background: #0d0d0d; /*#0b0b0b*/
  opacity: 0.990;
  scrollbar-color: #424242 transparent;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 code span {
  font-style: normal;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 code.hljs, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-selector-tag, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 code[class*="language-"], div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 pre[class*="language-"] {
	color: #fff;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-meta {
  color: #fff9;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-attr, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-number, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-selector-attr, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-selector-class, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-selector-pseudo, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-template-variable, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-type, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-variable {
	color: #df3079;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-doctag, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-formula, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-keyword, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-literal {
	color: #2e95d3;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-bullet, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-link, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-selector-id, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-symbol, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-title {
	color: #f22c3d;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-addition, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-attribute, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-meta-string, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-regexp, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-string {
	color: #00a67d;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-built_in, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-class .hljs-title {
  color: #e9950c;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-comment {
	color: #ffffff80;
}
  1. Если вы используете “CustomCSS Injector”, то выберете параметр “Apply to Domain”.
  2. Вставьте следующий адрес “chatgpt.com” в поле “Whitelist Domains”, или аналогичное если есть.
  3. Нажмите кнопку “Save” несколько раз.

“CustomCSS Injector” - не требует обновления страницы, поэтому вы сразу же увидите результат. Я добавил “opacity”, чтобы цвета в редакторе не были слишком резкие в светлой теме и не раздражали глаз. Но вы всё ещё можете настроить это на свой вкус.

15.01.2025: Обновил стили, теперь есть оформление для кода в ваших сообщениях, а не только AI. Без подсветки синтаксиса, там лишь текст (без JS с этим ничего не сделать).