c++TinML转html

c++TinML转html

  • 前言
  • 解析
  • 解释
  • 转译html
    • 类定义
    • 开头html
  • 结果
    • 这是最终效果（部分）： ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6cf6c3e3c821446a84ae542bcc2652d4.png)

前言

在python.tkinter设计标记语言(转译2-html)中提到了将TinML转为静态html的python实现方法；在HtmlRender - c++实现的html生成类中又提供了我自己写的基于c++编辑html的简单方式，这篇笔记就是使用c++将tinml转为静态html。

本示例未使用任何第三方库（除了我之前提供的HtmlRender类），但是在html中代码高亮方面使用了在线的highlight.js。

整套流程下来和基于python的TinText平台类似，都是先解析TinML标记文本段，再给每个标记赋以特定含义（解释过程），最后通过这些解释后的内容生成html结构，生成html文本。

项目示例：CppTinParser: TinML to html by c++

解析

这一部分是对TinML标记的语法解析。

class TinLexer{public:TinLexer(string contents){this->content = '\n' + contents + '\n';}void run_test();vector<string> run();vector<map<string,vector<string>>> lex();private:string content;};

主要解析功能就是对每一行TinML标记文本段进行基于上下文标记的正则匹配和结构解析，这部分相当于TinText项目中的TinParser：

  • 单行TinML标记，分为标记名称和标记参数组
  • 多行模式TinML，转为单行TinML标记解析后格式

部分代码如下：

vector<map<string,vector<string>>> TinLexer::lex(){// 预处理// tackle <tinfile>: add context of the specific TinML file into this->content// 此部分代码省略，可见程序源码// ...vector<map<string,vector<string>>> tinresults;//总结果vector<string> contents;string nowtag;//当前标签contents = split(this->content, '\n');bool Lines = false;//多行模式regex pattern("^<(.*?)>(.*)");smatch result;vector<string> args;//参数列表for (const auto &i : contents){if (size(i) == 1){// 实际上是empty，不过貌似写不对// 既有可能是因为getline将\n转为\0，导致该字符串截止continue;}if (size(i)>=2 && i.substr(0,2)=="|-"){//  cout << "Comment: " << i << endl;continue;}map<string,vector<string>> lineargs;//单行参数if (Lines){if (i[0]=='|'){if (size(i)>2 && i[i.length()-2]!='|'){string content = i.substr(1,size(i)-2);args.push_back(subreplace(content, "%VEB%", "|"));}else if (size(i)==2){args.push_back("");}else{string content = i.substr(1,size(i)-3);args.push_back(subreplace(content, "%VEB%", "|"));// for (auto const &j : args){//     cout << "Arg: " << j << endl;// }lineargs[nowtag] = args;tinresults.push_back(lineargs);args.clear();Lines = false;}}}else if (i[i.length()-2] == ';'){// getline最后一个为\0，因此-2// string本身不以\0结尾，但是getline会改成\0Lines = true;bool ismatch = regex_search(i, result, pattern);if (ismatch){// cout << "Tag: " << result[1] << endl;nowtag = result[1];string content = result[2];int lastindex = content.find_last_of(';');content = content.substr(0, lastindex);args.push_back(subreplace(content, "%VEB%", "|"));}else{cout << "\033[33;1m不可被解析，当作<p>处理：" << i << "\033[0m" << endl;args.push_back(subreplace(i, "%VEB%", "|"));lineargs["p"] = args;tinresults.push_back(lineargs);args.clear();}}else{bool ismatch = regex_search(i, result, pattern);if (ismatch){nowtag = result[1];string content = result[2];auto oargs = split(content, '|');for (auto const &j : oargs)args.push_back(subreplace(j, "%VEB%", "|"));lineargs[nowtag] = args;tinresults.push_back(lineargs);args.clear();}else{//无法匹配当作p处理cout << "\033[33;1m不可被解析，当作<p>处理：" << i << "\033[0m" << endl;args.push_back(subreplace(i, "%VEB%", "|"));lineargs["p"] = args;tinresults.push_back(lineargs);args.clear();}}}return tinresults;
}

这里还遇到一个坑，string.getline会将分割字符转为\0，这样导致string类型变量所包含的文字比表达的文字多一个“字”。string的设计是不包含的\0，所以要注意从string类型中取字符的下标。

解析过程是最基础的，也几乎不会再维护，毕竟TinML的语法就这样了。

解释

这和TinText软件中转译html的过程一样，只不过TinEngine在渲染之前就生成了解释内容并传递给了转译器，而CppTinParser需要单独进行参数解释。

首先，生成每个标记对应的参数含义：

static map<string, vector<string>> tinkws;void loadkws()
{// 标记对应的参数键tinkws["ac"] = {"name"};tinkws["anchor"] = {"name"};tinkws["code"] = {"type", "codes"};tinkws["fl"] = {};tinkws["follow"] = {};tinkws["html"] = {"htmls"};tinkws["img"] = {"name", "url", "size"};tinkws["image"] = {"name", "url", "size"};tinkws["lnk"] = {"text", "url", "description"};tinkws["link"] = {"text", "url", "description"};tinkws["a"] = {"text", "url", "description"};tinkws["ls"] = {"lists"};tinkws["list"] = {"lists"};tinkws["n"] = {"notes"};tinkws["note"] = {"notes"};tinkws["nl"] = {"lists"};tinkws["numlist"] = {"lists"};tinkws["p"] = {"texts"};tinkws["pages"] = {"name"};tinkws["/page"] = {""};tinkws["/pages"] = {""};// 展示到这里位置，当然，这不是完整的//...
}

由于之前已经生成了类似如下的数据结构：

(("<title>",("title","1"),),("<p>",("paragraph",)),...
)

现在，就需要把这些已经分割好的标记文本转为有意义的内容：

(("<title>",("title": "title", "level": "1"),),("<p>",("paragraph": ("paragraph",))),...
)

这里采用的逻辑是对一个标签所拥有的所有参数一一对应，多出来的统一给最后一个参数。

这部分逻辑实现如下：

map<string, string> tokeywords(string tag, vector<string> contents)
{// 将列表顺序参数转为键、值类参数map<string, string> keywords;cout << "Tag: " << tag << endl;keywords["tag"] = tag;int args_num = contents.size();int index = 0;for (auto kws : tinkws[tag]){if (index >= args_num){// 剩下键全为空keywords[kws] = "";continue;}keywords[kws] = contents[index];// cout << kws << " = " << contents[index] << endl;index++;}if (index < args_num){// 将剩下的参数全部放入最后一个键中for (int i = index; i < args_num; i++){keywords[tinkws[tag].back()] += "\n" + contents[i];}}for (auto kw : keywords){if (kw.first == "tag"){ // 跳过tag键continue;}cout << kw.first << " = " << kw.second << endl;}return keywords;
}

class TinParser
{
public:TinParser(vector<map<string, vector<string>>> contents){this->contents = contents;}void parse();void render(string file);private:vector<map<string, vector<string>>> contents;vector<map<string, string>> result;
};void TinParser::parse()
{// 判断tag是否存在contents = this->contents;for (auto content : contents){string tag = content.begin()->first;if (tinkws.find(tag) == tinkws.end()){cerr << "\033[33;1mtag not found: " << tag << "\033[0m" << endl;// //string转char// char c_tag;// strcpy(&c_tag, tag.c_str());// throw NoTagName(c_tag);continue;}map<string, string> results = tokeywords(tag, content.begin()->second);result.push_back(results);}
}

转译html

经过前面的准备，这里已经准备好了将TinML转译为html的所有信息。

由于在之前的文章中已经给出了HtmlRender的实现和使用示例，这里便不再赘叙。

这部分的代码和TinText的tin2html.py实现在逻辑上完全一致，甚至可以看作是python到c++的翻译。

类定义

class TinRender {//tin->html类
public:TinRender(const string &file) : file_(file){}HtmlRender* render(vector<map<string,string>> content, bool _style = true, bool _code_style = true);//转译为htmlvoid output(vector<map<string,string>> content);//输出
private:string file_;//html文件路径ofstream fout_;//html文件输出流
};

开头html

就是html头中包含的样式、额外引入js、标题这些。

HtmlRender* TinRender::render(vector<map<string, string>> content, bool _style, bool _code_style){//转译为HtmlRender。可以直接使用output方法转译+输出保存//注意，CPPTinParser只是用c++实现的tinml转译器//不作为TinML规范的检查器string tag;HtmlRender* html = new HtmlRender("html", "", {});HtmlRender* head = new HtmlRender("head", "", {});HtmlRender* title = new HtmlRender("title", "TinML", {});head->add(title);HtmlRender* meta = new HtmlRender("meta", "", {{"charset","UTF-8"}}, true);head->add(meta);//读取css文件if (_style){string filename = "blubook.css";ifstream infile;infile.open(filename.data());   //将文件流对象与文件连接起来 assert(infile.is_open());   //若失败,则输出错误消息,并终止程序运行 string s, strAllLine;while (getline(infile, s)){strAllLine += s + "\n";}infile.close();             //关闭文件输入流HtmlRender* style = new HtmlRender ("style", strAllLine, {}, false, true);head->add(style);}//<code>样式if (_code_style){HtmlRender* codestyle = new HtmlRender("link", "", {{"rel","stylesheet"}, {"type", "text/css"}, {"href","https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs.min.css"}});head->add(codestyle);HtmlRender* codescript = new HtmlRender("script", "", {{"src","https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"}});head->add(codescript);HtmlRender* codestartscript = new HtmlRender("script", "hljs.highlightAll();", {});head->add(codestartscript);}HtmlRender* _body = new HtmlRender("body", "", {});HtmlRender* body = new HtmlRender("div", "", {{"id","content"}});_body->add(body);html->add(head);html->add(_body);// 提前定义类型变量HtmlRender* table;HtmlRender* tbody;bool tablehead = false;HtmlRender* tabsview;bool pagestag = false;vector<string> pagesnames;vector<map<string, string>> pagescontent;int pagescount = 0;// ...
}

然后就是对每一个标记的单独转译，这些都在上面的那个方法里，这里给几个例子：

// ...//常规转译TinML解析结果if (tag == "ac" || tag == "anchor"){string name = item["name"];if (name[0]=='#'){//锚点链接HtmlRender* anchor = new HtmlRender("a", "🔗", {{"href", name}});HtmlRender* lastitem = body->children().back();lastitem->add(anchor);}else{//锚点定义HtmlRender* anchor = new HtmlRender("a", "", {{"id", name}});body->add(anchor);}}else if (tag == "code"){//代码块//使用highlight.js，不支持tinml代码块string type = item["type"];string codes = item["codes"];if (type == "tin"){type = "nohighlight";}else{type = "language-" + type;}HtmlRender* pre = new HtmlRender("pre", "", {});HtmlRender* code = new HtmlRender("code", codes, {{"class",type}});pre->add(code);body->add(pre);}else if (tag == "html"){//html文本string htmltext = item["htmls"];HtmlRender* htmlcont = new HtmlRender("", htmltext, {}, false, true);body->add(htmlcont);}else if (tag == "img" || tag == "image"){//图片string name = item["name"];string url = item["url"];if (url.empty()){//因为CppTinParser只是用c++实现的tinml转译器//不作为TinML规范的检查器，也不作为tin文件渲染环境//所以不会有额外的资源文件储存位置//因此，不支持从本地文件中导入图片continue;}vector<string> size = render_split(item["size"], 'x');string width = size[0];string height = size[1];HtmlRender* img = new HtmlRender("img", "", {{"alt", ""},{"src", url}, {"width", width}, {"height", height}});body->add(img);}// ...
// ...

CppTinParser甚至给对<p>的解析也单独移植了TinText中的逻辑：

void load_para(HtmlRender* p, vector<string> lines){//添加<p>内容vector<char> tags = {'*','-','_','/','=','!','^','&','#'};regex reg(".*?!\\[(.*)\\]\\((.*)\\)");smatch result;int count = 0;if (lines.size()==0){//空行HtmlRender* br = new HtmlRender("br", "", {}, true);p->add(br);return;}for (auto &line : lines) {HtmlRender* last = p;//p最后一个元素if (line[0] == ' '){//空格string text = line.substr(1);HtmlRender* p_item = new HtmlRender("", text, {});p->add(p_item);continue;}string head;if (line.size() <=9){head = line;}else{head = line.substr(0, 9);}//<p>开头标记需要连续count = 0;for (auto &tag_char : head){if (find(tags.begin(), tags.end(), tag_char) != tags.end()){count++;}else{break;}}head = head.substr(0, count);if (count == 0){HtmlRender* p_item = new HtmlRender("", line, {});p->add(p_item);continue;}if (head.find('*')!=string::npos){HtmlRender* nowlast = new HtmlRender("b", "", {});last->add(nowlast);last = nowlast;}if (head.find('/')!=string::npos){HtmlRender* nowlast = new HtmlRender("i", "", {});last->add(nowlast);last = nowlast;}if (head.find('_')!=string::npos){HtmlRender* nowlast = new HtmlRender("u", "", {});last->add(nowlast);last = nowlast;}if (head.find('-')!=string::npos){HtmlRender* nowlast = new HtmlRender("s", "", {});last->add(nowlast);last = nowlast;}if (head.find('=')!=string::npos){// = 和 # 只能存在一个HtmlRender* nowlast = new HtmlRender("mark", "", {});last->add(nowlast);last = nowlast;}else if (head.find('#')!=string::npos){HtmlRender* nowlast = new HtmlRender("code", "", {});last->add(nowlast);last = nowlast;}if (head.find('^')!=string::npos){// ^ 和 & 只能存在一个HtmlRender* nowlast = new HtmlRender("sup", "", {});last->add(nowlast);last = nowlast;}else if (head.find('&')!=string::npos){HtmlRender* nowlast = new HtmlRender("sub", "", {});last->add(nowlast);last = nowlast;}if (head.find('!')!=string::npos){bool ismatch = regex_match(line, result, reg);if (ismatch) {string text = result[1];string url = result[2];if (text == ""){text = url;}HtmlRender* p_item = new HtmlRender("a", text, {{"href",url}});last->add(p_item);}else{string text = line.substr(count);HtmlRender* p_item = new HtmlRender("", text, {});last->add(p_item);}}else{last->configcnt(line.substr(count));}}
}

结果

这里用的是TinText项目中的test.tin。效果上来看，除了<code>中对TinML的缺失以及对在线图片、tinfile不支持外，其他几乎一样，而且对于大文件的转译绝对比python实现要快。

这是源文件（部分）：
在这里插入图片描述

在这里插入图片描述

这是最终效果（部分）：
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/19262.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2.2 反向传播：神经网络如何“学习“？

2.2 反向传播：神经网络如何“学习“？

一、神经网络就像小学生 想象一个刚学算术的小学生&#xff0c;老师每天布置练习题&#xff0c;学生根据例题尝试解题&#xff0c;老师批改后指出错误。神经网络的学习过程与此相似&#xff1a; 输入层&#xff1a;相当于练习题&#xff08;如数字图片&#xff09;输出层&…
阅读更多...
QEMU 通过网络实现共享文件

QEMU 通过网络实现共享文件

系列文章目录 Linux内核学习 Linux 知识&#xff08;1&#xff09; Linux 知识&#xff08;2&#xff09; WSL Ubuntu QEMU 虚拟机 Linux 调试视频 PCIe 与 USB 的补充知识 vscode 使用说明 树莓派 4B 指南 设备驱动畅想 Linux内核子系统 Linux 文件系统挂载 QEMU 通过网络实现…
阅读更多...
当时只道是寻常

当时只道是寻常

晴&#xff0c;2025年2月16日 卸载了油管、脸书和 X 手机 app &#xff0c;太浪费我时间&#xff0c;以后再去经营吧。 教学技能大赛材料需要在明天之内搞定——《教学实施方案》。感觉玄&#xff0c;同部门有经验的老师说至少花一周时间。 只能明天早点继续接着弄&#xff…
阅读更多...
Hive之分区表

Hive之分区表

Hive之分区表 文章目录 Hive之分区表写在前面分区表分区表基本操作引入分区表创建分区表语法加载数据到分区表中查询分区表中数据增加分区删除分区查看分区表有多少分区查看分区表结构 二级分区正常的加载数据分区表和数据产生关联 动态分区开启动态分区参数设置案例实操 写在前…
阅读更多...
【线段树模板】

【线段树模板】

介绍 这段代码看起来是一个基于树结构的数据结构&#xff0c;可能是线段树或者其他类似的数据结构。主要包含了构建数据结构、查询和修改等基本操作的实现函数。以下是对每个函数的简要介绍&#xff1a; pushup(int u): 用于计算结点u的属性。build(int u, int l, int r): 用于…
阅读更多...
DeepSeek辅助测试测试一 -- DeepSeek加MaxKB知识库本地部署

DeepSeek辅助测试测试一 -- DeepSeek加MaxKB知识库本地部署

文章目录 前言任务拆解最终目标两种技术路径对比知识库检索增强&#xff08;RAG&#xff09; 大语言模型 构建知识库加本地部署DeepSeek目前的问题 前言 开工已经两周啦&#xff0c;开始慢慢的进入工作状态了&#xff0c;新的一年大家一起加油吧~ 任务拆解 最终目标 训练一…
阅读更多...
Yuque-DL：一款强大的语雀资源下载工具

Yuque-DL：一款强大的语雀资源下载工具

语雀是一款常用的文档管理工具&#xff0c;但官方未提供直接下载文档的功能。为此&#xff0c;可以使用第三方工具下载语雀文档。以下是使用步骤&#xff1a; 1. 安装工具 GitHub - gxr404/yuque-dl: yuque 语雀知识库下载 安装步骤&#xff1a; 确保已安装 Node.js&#xff…
阅读更多...
【Java 面试 八股文】Spring Cloud 篇

【Java 面试 八股文】Spring Cloud 篇

Spring Cloud 篇 1. Spring Cloud 5大组件有哪些&#xff1f;2. 服务注册和发现是什么意思&#xff1f;Spring Cloud 如何实现服务注册发现&#xff1f;3. 我看你之前也用过nacos&#xff0c;你能说下nacos与eureka的区别&#xff1f;4. 你们项目负载均衡如何实现的&#xff1f…
阅读更多...
国内外网络安全政策动态（2025年1月）

国内外网络安全政策动态（2025年1月）

▶︎ 1.国家互联网信息办公室发布《个人信息出境个人信息保护认证办法&#xff08;征求意见稿&#xff09;》 1月3日&#xff0c;国家互联网信息办公室发布《个人信息出境个人信息保护认证办法&#xff08;征求意见稿&#xff09;》。根据《意见稿》&#xff0c;个人信息出境个…
阅读更多...
图论入门算法:拓扑排序(C++)

图论入门算法:拓扑排序(C++)

上文中我们了解了图的遍历(DFS/BFS), 本节我们来学习拓扑排序. 在图论中, 拓扑排序(Topological Sorting)是对一个有向无环图(Directed Acyclic Graph, DAG)的所有顶点进行排序的一种算法, 使得如果存在一条从顶点 u 到顶点 v 的有向边 (u, v) , 那么在排序后的序列中, u 一定…
阅读更多...
Anaconda +Jupyter Notebook安装（2025最新版）

Anaconda +Jupyter Notebook安装（2025最新版）

Anaconda安装&#xff08;2025最新版&#xff09; Anaconda简介安装1&#xff1a;下载anaconda安装包2&#xff1a; 安装anaconda3&#xff1a;配置环境变量4&#xff1a;检查是否安装成功5&#xff1a;更改镜像源6&#xff1a;更新包7&#xff1a;检查 Jupyter Notebook一.Jup…
阅读更多...
VS2022中.Net Api + Vue 从创建到发布到IIS

VS2022中.Net Api + Vue 从创建到发布到IIS

VS2022中.Net Api Vue 从创建到发布到IIS 前言一、先决条件二、创建项目三、运行项目四、增加API五、发布到IIS六、设置Vue的发布 前言 最近从VS2019 升级到了VS2022,终于可以使用官方的.Net Vue 组合了,但是使用过程中还是有很多问题,这里记录一下. 一、先决条件 Visual …
阅读更多...
vue点击左边导航，右边出现页面步骤

vue点击左边导航，右边出现页面步骤

vue点击左边导航&#xff0c;右边出现页面 步骤 一定要import不然会出错 index.js Course作为Homeview子路由 Homeview加入<Routerview> 点击跳转<RouterLink to> 父Homeview中有RouterView&#xff08;路由出口&#xff0c;跳转至相应路径&#xff09;和Router…
阅读更多...
位运算，双指针，二分，排序算法

位运算，双指针，二分，排序算法

文章目录 位运算二进制中1的个数题解代码我们需要0题解代码 排序模版排序1题解代码模版排序2题解代码模版排序3题解代码 双指针最长连续不重复子序列题解代码 二分查找题解代码 位运算 1. bitset< 16 >将十进制数转为16位的二进制数 int x 25; cout << bitset<…
阅读更多...
【力扣】102.二叉树的层序遍历

【力扣】102.二叉树的层序遍历

AC截图 题目 思路 维持一个队列&#xff0c;每次容纳一层的元素即可。 代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* Tre…
阅读更多...
【HarmonyOS Next】图片选择方案

【HarmonyOS Next】图片选择方案

背景 封装一个选择图片和调用拍照相机的按钮&#xff0c;展示api13下选择图片和调用相机&#xff0c;可以使用不申请用户权限的方式&#xff0c;进行图片的选择和修改。但是&#xff0c;目前方案并未包含上传图片保存的功能&#xff0c;仅提供图片选择或者拍照后&#xff0c;图…
阅读更多...
25年湖南省考报名流程保姆级教程

25年湖南省考报名流程保姆级教程

2025年湖南省考报名马上就要开始啦&#xff01; 有想要参加湖南省考的姐妹们&#xff0c;可以提前了解一下考试报名流程&#xff0c;熟悉考试报名照上传要求&#xff01; 一、考试时间安排 报名时间&#xff1a;2月17日9:00至2月25日 17:00 审核时间&#xff1a;2月17日9:0…
阅读更多...
某大型业务系统技术栈介绍【应对面试】

某大型业务系统技术栈介绍【应对面试】

微服务架构【图】 微服务架构【概念】 微服务架构&#xff0c;是一种架构模式&#xff0c;它提倡将单一应用程序划分成一组小的服务&#xff0c;服务之间互相协调、互相配合&#xff0c;为用户提供最终价值。在微服务架构中&#xff0c;服务与服务之间通信时&#xff0c;通常是…
阅读更多...
STM32的DMA解释

STM32的DMA解释

一句话解释&#xff1a; DMA的特点就是无需CPU的参与就可以直接访问内存&#xff08;可以直接读取内存的数据&#xff0c;也可以直接传数据给内存&#xff09; 这个内存一般指的是片内SRAM、片内Flash 我举个例子&#xff1a; 有一个温度传感器&#xff0c;它以较高的频率&a…
阅读更多...
DIN：引入注意力机制的深度学习推荐系统，

DIN：引入注意力机制的深度学习推荐系统，

实验和完整代码 完整代码实现和jupyter运行&#xff1a;https://github.com/Myolive-Lin/RecSys--deep-learning-recommendation-system/tree/main 引言 在电商与广告推荐场景中&#xff0c;用户兴趣的多样性和动态变化是核心挑战。传统推荐模型&#xff08;如Embedding &…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023