WIP: (this commit will vanish soon)

resources/schemas/org.gnome.shell.extensions.pano.gschema.xml

@@ -406,6 +406,21 @@
       <summary>char-length</summary>
       <description>char-length</description>
     </key>
+    <key name="code-highlighter-enabled" type="b">
+      <default>false</default>
+      <summary>Enabled Code Highlighter</summary>
+      <description>Enabled the Code Highlighter.</description>
+    </key>
+    <key type="u" name="code-highlighter">
+      <range min="0" max="0"/>
+      <default>0</default>
+      <summary>code-highlighter: which code highlighter to use </summary>
+    </key>
+    <key name="pygments-options" type="s">
+      <default>'{}'</default>
+      <summary>options for pygments</summary>
+      <description>set pygments options</description>
+    </key>
   </schema>
 
   <schema path="/org/gnome/shell/extensions/pano/color-item/" id="org.gnome.shell.extensions.pano.color-item">
@@ -440,4 +455,4 @@
       <description>metadata-font-size</description>
     </key>
   </schema>
-</schemalist>
+</schemalist>

src/prefs/customization/codeItemStyle.ts

@@ -1,8 +1,15 @@
 import Gio from '@girs/gio-2.0';
 import type { ExtensionBase } from '@girs/gnome-shell/dist/extensions/sharedInternals';
 import { ItemExpanderRow } from '@pano/prefs/customization/itemExpanderRow';
-import { createColorRow, createFontRow, createSpinRow } from '@pano/prefs/customization/utils';
+import {
+  createColorRow,
+  createDropdownRow,
+  createFontRow,
+  createSpinRow,
+  createSwitchRow,
+} from '@pano/prefs/customization/utils';
 import { registerGObjectClass } from '@pano/utils/gjs';
+import { availableCodeHighlighter } from '@pano/utils/pango';
 import { getPanoItemTypes } from '@pano/utils/panoItemType';
 import { getCurrentExtensionSettings, gettext } from '@pano/utils/shell';
 
@@ -61,5 +68,32 @@ export class CodeItemStyleRow extends ItemExpanderRow {
         5000,
       ),
     );
+
+    const codeHighlighterRow = createDropdownRow(
+      _('Code Highlighter'),
+      _('You can change which code highlighter to use'),
+      this.settings,
+      'code-highlighter',
+      availableCodeHighlighter.map((highlighter) => highlighter.name),
+      (_value) => {
+        ///TODO: handle
+      },
+    );
+
+    // create code highlighter enabled row
+    this.add_row(
+      createSwitchRow(
+        _('Code Highlighter Enabled'),
+        _('When enabled, Code will be highlighted'),
+        this.settings,
+        'code-highlighter-enabled',
+        (value) => {
+          codeHighlighterRow.set_sensitive(value);
+        },
+      ),
+    );
+
+    // create code highlighter row
+    this.add_row(codeHighlighterRow);
   }
 }

src/prefs/customization/utils.ts

@@ -4,6 +4,71 @@ import Gio from '@girs/gio-2.0';
 import Gtk4 from '@girs/gtk-4.0';
 import Pango from '@girs/pango-1.0';
 
+// const switchMenuItem = new PopupSwitchMenuItem(_('Incognito Mode'), this.settings.get_boolean('is-in-incognito'));
+
+// switchMenuItem.connect('toggled', (value) => {
+//   this.settings.set_boolean('code-highlighter-enabled', value.state);
+// });
+
+export type ChangeCallback<T> = (value: T) => void;
+
+export const createSwitchRow = (
+  title: string,
+  subtitle: string,
+  settings: Gio.Settings,
+  schemaKey: string,
+  callback?: ChangeCallback<boolean>,
+) => {
+  const row = new Adw.ActionRow({
+    title,
+    subtitle,
+  });
+
+  const value = settings.get_boolean(schemaKey);
+  callback?.(value);
+
+  const switch_ = new Gtk4.Switch({
+    active: value,
+    valign: Gtk4.Align.CENTER,
+    halign: Gtk4.Align.CENTER,
+  });
+
+  settings.bind(schemaKey, switch_, 'active', Gio.SettingsBindFlags.DEFAULT);
+
+  row.add_suffix(switch_);
+  row.set_activatable_widget(switch_);
+
+  const clearButton = new Gtk4.Button({
+    iconName: 'edit-clear-symbolic',
+    valign: Gtk4.Align.CENTER,
+    halign: Gtk4.Align.CENTER,
+  });
+
+  const defaultValue = settings.get_default_value(schemaKey)?.get_boolean();
+
+  if (defaultValue === value) {
+    clearButton.sensitive = false;
+  }
+
+  settings.connect(`changed::${schemaKey}`, () => {
+    const value = settings.get_boolean(schemaKey);
+    if (defaultValue === value) {
+      clearButton.sensitive = false;
+    } else {
+      clearButton.sensitive = true;
+    }
+    callback?.(value);
+  });
+
+  clearButton.connect('clicked', () => {
+    settings.reset(schemaKey);
+  });
+
+  row.add_suffix(clearButton);
+
+  return row;
+};
+
 export const createColorRow = (title: string, subtitle: string, settings: Gio.Settings, schemaKey: string) => {
   const colorRow = new Adw.ActionRow({
     title,
@@ -207,13 +272,18 @@ export const createDropdownRow = (
   settings: Gio.Settings,
   schemaKey: string,
   options: string[],
+  callback?: ChangeCallback<string>,
 ) => {
   const row = new Adw.ActionRow({
     title,
     subtitle,
   });
 
   const value = settings.get_uint(schemaKey);
+  const stringValue = options[value];
+  if (stringValue) {
+    callback?.(stringValue);
+  }
 
   const dropDown = new Gtk4.DropDown({
     valign: Gtk4.Align.CENTER,
@@ -250,6 +320,10 @@ export const createDropdownRow = (
       clearButton.sensitive = true;
     }
     dropDown.set_selected(value);
+    const stringValue = options[value];
+    if (stringValue) {
+      callback?.(stringValue);
+    }
   });
 
   clearButton.connect('clicked', () => {

src/utils/code/highlight.ts

@@ -3,20 +3,42 @@ export type Language = {
   language: string;
 };
 
-export type CodeHighlighterType = 'CommandLine' | 'Integrated' | 'JSModule';
+export type CodeHighlighterType = 'CommandLine' | 'JSModule';
+
+export type DropDownValue = {
+  title: string;
+  subtile: string;
+};
+
+export type DropDownOption = {
+  type: 'dropdown';
+  values: DropDownValue[];
+};
+
+export type OptionForSettings = DropDownOption;
+
+export type OptionsForSettings = Record<string, OptionForSettings>;
 
 export abstract class CodeHighlighter {
   readonly name: string;
   readonly type: CodeHighlighterType;
+  protected installed: boolean;
 
-  constructor(name: string, type: CodeHighlighterType) {
+  constructor(name: string, type: CodeHighlighterType, installed = false) {
     this.name = name;
     this.type = type;
+    this.installed = installed;
   }
 
   abstract isInstalled(): boolean;
 
   abstract detectLanguage(text: string): Language | undefined;
 
   abstract markupCode(language: string, text: string, characterLength: number): string | undefined;
+
+  abstract getOptionsForSettings(): OptionsForSettings;
+
+  abstract set options(options: string);
+
+  abstract get options(): string;
 }