一个使用 SwiftUI 构建的 TextEditor 视图，支持使用 Highlight.js 进行语法高亮。

它构建于 Highlightr 之上，Highlightr 封装了 Highlight.js。 CodeEditor 然后将这些内容打包以便在 SwiftUI 中使用。

（Shaper 实际上没有使用 Highlightr，但在其他方面非常相似）。

要将 CodeEditor 用作源代码查看器，只需将源代码作为字符串传递即可

struct ContentView: View {

    var body: some View {
        CodeEditor(source: "let a = 42")
    }
}

struct ContentView: View {

    @State private var source = "let a = 42\n"
    
    var body: some View {
        CodeEditor(source: $source, language: .swift, theme: .ocean)
    }
}

CodeEditor.availableLanguages
CodeEditor.availableThemes

struct MyEditor: View {
  
    @State private var source   = "let it = be"
    @State private var language = CodeEditor.Language.swift

    var body: some View {
        Picker("Language", selection: $language) {
            ForEach(CodeEditor.availableLanguages) { language in
                Text("\(language.rawValue.capitalized)")
                    .tag(language)
            }
        }
    
        CodeEditor(source: $source, language: language)
    }
}

注意：如果外观发生更改，CodeEditor 不会自动进行主题更改。

受 NTYSmartTextView 的启发，CodeEditor 现在还支持（在 macOS 上）：

CodeEditor(source: $source, language: language, 
           flags: [ .selectable, .editable, .smartIndent ])

CodeEditor(source: $source, language: language,
           indentStyle: .softTab(width: 2))

自动字符配对是根据语言自动进行的。例如，对于类似 C 的语言（例如 Swift）、Python 或 XML 有一组默认值。可以使用 CodeEditor 中相应的静态变量覆盖默认值，或者可以显式设置所需的配对

CodeEditor(source: $source, language: language,
           autoPairs: [ "{": "}", "<": ">", "'": "'" ])

在 macOS 上，编辑器支持字体大小调整（使用 Cmd +/Cmd - 和字体面板）。要启用大小调整命令，WindowScene 需要应用正确的命令，例如

WindowGroup {
    ContentView()
}
.commands {
    TextFormattingCommands()
}

 struct ContentView: View {
    static private let initialSource = "let a = 42\n"

    @State private var source = Self.initialSource
    @State private var selection = Self.initialSource.endIndex..<Self.initialSource.endIndex

    var body: some View {
        CodeEditor(source: $source,
                   selection: $selection,
                   language: .swift,
                   theme: .ocean,
                   autoscroll: false)
        Button("Select All") {
            selection = source.startIndex..<source.endIndex
        }
    }
}

当 autoscroll 为 true 时，当从外部（即通过编程方式）修改 selection 时，编辑器会自动滚动到相应的光标位置。

基于出色的 Highlightr。这意味着它使用 JavaScriptCore 作为实际的驱动程序。正如 Highlightr 所说

该编辑器与用于 SwiftUI 的 SVG Shaper（用于其 SVG 和 Swift 编辑器部分）使用的编辑器类似（但不完全相同）。

import SwiftUI
import CodeEditor

struct ContentView: View {
  
  #if os(macOS)
    @AppStorage("fontsize") var fontSize = Int(NSFont.systemFontSize)
  #endif
  @State private var source = "let a = 42"
  @State private var language = CodeEditor.Language.swift
  @State private var theme    = CodeEditor.ThemeName.pojoaque

  var body: some View {
    VStack(spacing: 0) {
      HStack {
        Picker("Language", selection: $language) {
          ForEach(CodeEditor.availableLanguages) { language in
            Text("\(language.rawValue.capitalized)")
              .tag(language)
          }
        }
        Picker("Theme", selection: $theme) {
          ForEach(CodeEditor.availableThemes) { theme in
            Text("\(theme.rawValue.capitalized)")
              .tag(theme)
          }
        }
      }
      .padding()
    
      Divider()
    
      #if os(macOS)
        CodeEditor(source: $source, language: language, theme: theme,
                   fontSize: .init(get: { CGFloat(fontSize)  },
                                   set: { fontSize = Int($0) }))
          .frame(minWidth: 640, minHeight: 480)
      #else
        CodeEditor(source: $source, language: language, theme: theme)
      #endif
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

CodeEditor 由 ZeeZide 提供。我们喜欢反馈、GitHub 星标、酷炫的合同工作，大概是您能想到的任何形式的赞美。

CodeEditor

用法

添加包

在 SwiftUI 应用程序中使用

语言和主题

智能缩进和开/关配对

字体大小

选择和滚动

Highlightr 和 Shaper

完整示例

关于