Markdown-Wechat 公众号代码高亮 多主题配资

本文所用排版工具:https://markdown.kaihu51.com

有没有觉得博客中的代码块显示不够酷,或排版没个性?
能不能酷一点,或有个性一点?
那当然是可以的! -
直接看代码效果,先来个高调的

public class MyActivity extends AppCompatActivity {
@Override  //override the function
    protected void onCreate(@Nullable Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       try {
            OkhttpManager.getInstance().setTrustrCertificates(getAssets().open("mycer.cer");
            OkHttpClient mOkhttpClient= OkhttpManager.getInstance().build();
        } catch (IOException e) {
            e.printStackTrace();
        }
}
再来个低调的
public class MyActivity extends AppCompatActivity {
@Override  //override the function
    protected void onCreate(@Nullable Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       try {
            OkhttpManager.getInstance().setTrustrCertificates(getAssets().open("mycer.cer");
            OkHttpClient mOkhttpClient= OkhttpManager.getInstance().build();
        } catch (IOException e) {
            e.printStackTrace();
        }
}

几十种风格,任你选择

当然,各种语言也不在话下
css的:

p {
  margin: 1.5em 0px;
}
h1,h2,h3,h4,h5,h6 {
  margin: 1.5em 0px;
  font-weight:bold;
}

html的:

<div >
      <span>abc<input id="code" type="checkbox" name="code" ></input></span>
       <textarea id="editor" rows="100" cols="100"></textarea>
</div>  

支持任意的语言,并能自动识别,有需要时也可直接指定

还有更牛的地方是,如果你对上面的风格都不满意时,你甚至可以自定义自己的代码高亮的样式,请参考:"一键排版"中的"代码块样式“

看了后,你是不是很好奇,这是怎样实现的?
其实简单的很

打开免费的markdown转换工具:https://markdown.kaihu51.com,并把你的markdown内容拷贝过去

选择你喜欢的代码风格

选择一键排版对你的内容进行排版

预览OK后,选择复制把内容复制

打开博客html输入框

20171127142908467

如果是博客园,用默认的富文本编辑模式,否则要切换到富文本编辑模式。
然后,打开博客园的html输入框如下:

20171127142222937

如果是csdn, 切换到博客的html模式

然后,打开优快云的html输入框如下:

20171127143429713

把之前复制的内容粘贴到html输入框,就搞掂

### 如何在 markdown-it-vue 中实现代码高亮 `markdown-it-vue` 是一个基于 Vue.js 的 Markdown 渲染组件,其核心依赖于 `markdown-it` 来解析 Markdown 文本并将其转换为 HTML。为了实现代码高亮功能,可以借助外部库如 `highlight.js` 或者其他类似的代码高亮工具。 以下是具体方法及置教程: #### 方法一:通过引入 `highlight.js` 1. **安装必要的依赖** 需要先安装 `highlight.js` 和 `markdown-it` 插件。 ```bash npm install highlight.js markdown-it markdown-it-vue ``` 2. **初始化 `markdown-it` 并集成 `highlight.js`** 下面是一个完整的示例代码片段展示如何设置 `markdown-it` 使用 `highlight.js` 进行代码高亮: ```javascript import { MarkdownItVue } from 'markdown-it-vue'; import hljs from 'highlight.js'; // 导入 highlight.js 库 const md = new MarkdownIt({ html: true, linkify: true, typographer: true, highlight: function (str, lang) { if (lang && hljs.getLanguage(lang)) { try { return `<pre><code class="hljs ${lang}">${hljs.highlight(str, { language: lang }).value}</code></pre>`; } catch (err) {} } return ''; // 如果未找到对应的语言,则返回空字符串 } }); export default { components: { MarkdownItVue }, data() { return { markdownContent: '# Hello World\n\nHere is some code:\n\n```javascript\nconsole.log("Hello");\n```' }; } }; ``` 3. **样式文件加载** 确保导入了 `highlight.js` 提供的主题 CSS 文件以便正确显示颜色方案。 ```javascript import 'highlight.js/styles/github.css'; // 替换为你喜欢的主题 ``` 以上步骤完成后,在运行应用时即可看到带有语法着色效果的代码块[^3]。 #### 方法二:自定义插件方式 如果希望更灵活地控制行为或者扩展更特性,也可以编写自己的插件来完成相同的功能。不过这种方法通常适用于有特殊需求的情况,对于一般用途推荐直接采用官方支持的方式即上述提到的第一种方法。 --- ### 注意事项 - 当前版本可能有所变化,请始终查阅最新文档获取最精确的信息。 - 对于大型项目建议考虑性能优化措施比如懒加载源等策略减少初始页面体积提升用户体验[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值