sbfkcel / towxml

微信小程序HTML、Markdown渲染库
https://github.com/sbfkcel/towxml/wiki
2.5k stars 315 forks source link

请问代码主题如何切换成 Atom Dark这种黑色主题、以及某个样式转换问题。 #212

Closed Wlisfes closed 2 years ago

Wlisfes commented 2 years ago

Version:3.1.1

1、代码的默认主题是GitHub,我想切换成Atom Dark这种黑色主题,但是我不知道改怎么做。 2、在图片上添加某个样式时未转换成功

以下是从markdown编辑器里面复制了一段,使用towxml在uni-app项目上,渲染效果请看图1,markdown编辑器使用的是mavon-editor。

### Oval(椭圆形)
::: hljs-left
    ![20211007195120.png](https://oss.lisfes.cn/cloud/upload/2021-10/1633607728661.png)
:::

此处是mavon-editor编辑器获取到的html,在web上加载效果请看图2。

<h3>
    <a id="Oval_13"></a>
    Oval(椭圆形)
</h3>
<div class="hljs-left">
    <p>
        <img src="https://oss.lisfes.cn/cloud/upload/2021-10/1633607728661.png" alt="20211007195120.png" />
    </p>
</div>

图1

20211015104224.png

图2

20211015103841.png

uni-app中全部代码

<template>
    <div class="node-article">
        <towxml :nodes="result" />
    </div>
</template>

> 我的就是想在uni-app中实现web中一样的效果,也就是图2。

<script>
import towxml from '../../static/towxml/towxml'
import { HttpStatus, nodeClientArticle } from '@/api'

export default {
    name: 'Article',
    components: { towxml },
    data() {
        return {
            html: '',
            result: ''
        }
    },
    onLoad({ id, title }) {
        uni.setNavigationBarTitle({ title })
        this.initNodeClientArticle(id)
    },
    methods: {
        /**文章信息-客户端**/
        async initNodeClientArticle(id) {
            try {
                const { code, data } = await nodeClientArticle({ id })
                if (code === HttpStatus.OK) {
                    this.result = this.towxml(data.content, 'markdown', {
                        theme: 'light'
                    })
                }
            } catch (e) {}
        }
    }
}
</script>
sbfkcel commented 2 years ago

查看 style/theme 下的主题定义

Wlisfes commented 2 years ago

style/theme下引入了parse/highlight/style/github.wxss, 是否替换github.wxss就可以生效?

sbfkcel commented 2 years ago

是的