2021/05/31
SwiftUIでswiftのコードのシンタックスハイライトを表示する
JohnSundell/Splashのライブラリを利用させていただきました。
こちらのライブラリはWebでも使えて、swiftのコードのシンタックスハイライトをしたhtml+cssを吐き出すような使い方をするようでしたが、
swiftアプリ用に、NSAttributedString
形式での出力にも対応していたため、そちらを利用しました。
以下完成版です。
- UILabelをうまく使って、SwiftUI用のViewを作っています。
- numberOfLines = 0 を指定して、行数の表示と高さを可変にするようにしています。
import SwiftUI
import Splash
struct MarkdownCodeView: View {
var code: String
var body: some View {
ScrollView(.horizontal, showsIndicators: false) {
MarkdownCodeLabel(code: code)
.padding()
.background(Color.Gray900)
}
}
}
struct MarkdownCodeLabel: UIViewRepresentable {
var code: String
func makeUIView(context: Context) -> UILabel {
let label = UILabel()
label.numberOfLines = 0
label.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
return label
}
func updateUIView(_ uiView: UILabel, context: Context) {
let theme = Theme(
font: Font(size: 12),
plainTextColor: UIColor(.Gray50),
tokenColors: [
.keyword: UIColor(.Pink500),
.string: UIColor(.Red500),
.type: UIColor(.Violet500),
.call: UIColor(.Gray50),
.number: UIColor(.LightBlue500),
.comment: UIColor(.Gray400),
.property: UIColor(.Violet500),
.dotAccess: UIColor(.Violet500),
.preprocessing: UIColor(.Orange500)
],
backgroundColor: UIColor(.Gray900)
)
let highlighter = SyntaxHighlighter(
format: AttributedStringOutputFormat(theme: theme)
)
uiView.attributedText = highlighter.highlight(code)
}
}
色の定義はこちらの記事を参考にしてください。
以上です。
関連する記事
SwiftUIを使った開発のノウハウをまとめたiOSアプリをリリースしました
Kumanoteでよく使うSwiftUIコンポーネントの作り方をソースコードと共に公開しています。
SwiftUIでswiftのコードのシンタックスハイライトを表示する
SwiftのコードをSwiftUIベースのアプリでシンタックスハイライトされた状態で見れるViewを作ってみました
Tailwindcssで定義されている色からSwiftUI版の定義を自動生成する
Tailwindcssで定義されている便利な色たちをSwiftUIアプリでも利用したいので、jsonで定義されている色をSwiftUI Colorsの変数に変換するスクリプトを作りました
[SwiftUI]Lottieファイルを使ってSplash画面をつくる
Lottieファイルを使ってSwiftUIアプリのSplash画面を作成しました