以下是我的代码,我想实现代码高亮,但是我所有内容都高亮了,怎么修改呢,是我这个类不对吗CodeElementBuilder
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:flutter_markdown_latex/flutter_markdown_latex.dart';
import 'package:flutter_highlighter/flutter_highlighter.dart';
import 'package:markdown/markdown.dart' as md;
import 'package:flutter_highlighter/themes/github.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Markdown with LaTeX and Code Highlighting'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: LatexWidget(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
content: '''
# PHP Calculator Example
```php
<?php
// 获取用户输入的数字和运算符
\$num1 = \$_POST["num1"];
\$num2 = \$_POST["num2"];
\$operator = \$_POST["operator"];
// 检查输入是否有效
if (!is_numeric(\$num1) || !is_numeric(\$num2)) {
echo "请输入有效的数字!";
exit;
}
// 执行运算
switch (\$operator) {
case "+":
\$result = \$num1 + \$num2;
break;
case "-":
\$result = \$num1 - \$num2;
break;
case "*":
\$result = \$num1 * \$num2;
break;
case "/":
if (\$num2 == 0) {
echo "除数不能为零!";
exit;
}
\$result = \$num1 / \$num2;
break;
default:
echo "无效的运算符!";
exit;
}
// 输出结果
echo "结果: " . \$result;
?>
```
**使用说明:**
1. 将代码保存为一个 PHP 文件,例如 `calculator.php`。
2. 创建一个 HTML 表单,用于用户输入数字和运算符:
```html
<form method="post" action="calculator.php">
<label for="num1">第一个数字:</label>
<input type="text" name="num1" id="num1"><br><br>
<label for="num2">第二个数字:</label>
<input type="text" name="num2" id="num2"><br><br>
<label for="operator">运算符:</label>
<select name="operator" id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select><br><br>
<input type="submit" value="计算">
</form>
```
3. 将表单提交到 `calculator.php` 文件。
4. PHP 代码会根据用户输入的数字和运算符执行相应的计算,并将结果显示在网页上。
**示例:**
用户输入:
* 第一个数字:10
* 第二个数字:5
* 运算符:+
计算结果:
```
结果: 15
```
**注意:**
* 此代码只实现了基本的加减乘除运算。您可以根据需要添加其他运算符,例如求余、幂运算等。
* 代码中包含了一些基本的错误处理,例如检查输入是否有效,防止除数为零等。
* 您可以在代码中添加更多功能,例如保存计算历史记录、提供用户界面等。
''',
),
),
);
}
}
// Define a widget for displaying LaTeX formulas and Markdown content with code highlighting
class LatexWidget extends StatefulWidget {
final double? width;
final double? height;
final String? content;
const LatexWidget({
required this.width,
required this.height,
required this.content,
super.key,
});
@override
State<LatexWidget> createState() => _LatexWidgetState();
}
class _LatexWidgetState extends State<LatexWidget> {
@override
Widget build(BuildContext context) {
final String content = widget.content ?? '';
if (content.isEmpty) {
return Container(
width: widget.width,
height: widget.height,
child: Center(
child: CircularProgressIndicator(strokeWidth: 2.0),
),
);
} else {
return Markdown(
data: content,
selectable: false,
styleSheet: MarkdownStyleSheet(
p: TextStyle(fontSize: 16),
h1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
h2: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
h3: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
builders: {
'latex': LatexElementBuilder(
textStyle: TextStyle(
fontFamily: 'lora',
fontSize: 16,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.italic,
),
textScaleFactor: 1.1,
),
'code': CodeElementBuilder(),
},
extensionSet: md.ExtensionSet(
[LatexBlockSyntax()],
[LatexInlineSyntax()],
),
);
}
}
}
class CodeHightLightView extends StatefulWidget {
final String content;
final String lang;
const CodeHightLightView({
super.key,
required this.content,
required this.lang,
});
@override
State<CodeHightLightView> createState() => _CodeHightLightViewState();
}
class _CodeHightLightViewState extends State<CodeHightLightView> {
@override
Widget build(BuildContext context) {
return HighlightView(
// The original code to be highlighted
widget.content,
// Specify language
language: widget.lang,
// Specify highlight theme
theme: githubTheme,
// Specify padding
padding: const EdgeInsets.all(8),
// Specify text style
textStyle: const TextStyle(
fontSize: 14,
),
);
}
}
class CodeElementBuilder extends MarkdownElementBuilder {
@override
Widget? visitElementAfter(md.Element element, TextStyle? preferredStyle) {
var language = '';
if (element.attributes['class'] != null) {
String lg = element.attributes['class'] as String;
language = lg.substring(9);
}
return CodeHightLightView(
content: element.textContent,
lang: language,
);
}
}