侧边栏壁纸
博主头像
小志IT知识库博主等级

人生可以拼可以闯，但不能忘本！

  • 累计撰写 84 篇文章
  • 累计创建 45 个标签
  • 累计收到 106 条评论

目 录CONTENT

文章目录
资源分享专栏 软件工具

Markdown博客文章编写方式

CZ
CZ
2022-07-19 / 0 评论 / 37 点赞 / 2744 阅读 / 21743 字 / 正在检测是否收录...
温馨提示：
本文最后更新于 2024-04-24，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我们删除。

1. Markdown简介

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档, 然后转换成格式丰富的HTML页面

2.语法

2.1 标题

在Markdown中,标题总共有六级. 只需要在文本前加上#即可,增加#时,标题字号相应降低

# 一级标题
## 二级标题
### 三级标题
......
###### 六级标题

2.2链接和图片

在Markdown中,插入链接不需要其他按钮,你只需要使用 [显示文本] (链接地址)这样的语法 eg:

[游民星空](http://www.gamersky.com/)

显示效果: 游民星空

在Markdown中,插入图片不需要其他按钮, 你只需要 这样的语法即可 eg:

![](http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0F/ChMkJ1bKwqeIKFNmAAonfZtjYLcAALGrQAYAnkACieV338.jpg)

显示效果:一张图片（自己体验）

Markdown支持自动链接形式来处理网址和电子邮件信箱,只要是用尖括号包起来, Markdown就会自动把它转成链接

例如:

<http:www.baidu.com>

显示效果: http:www.baidu.com

2.3 粗体和斜体

用两个*包含一段文本就是粗体的语法, 用一个 * 包含一段文本就是斜体的语法. eg:

得即*高歌*失即休,多愁多恨亦悠悠,**今朝有酒今朝醉**,明日愁来明日忧

显示效果: 得即高歌 失即休,多愁多恨亦悠悠,今朝有酒今朝醉,明日愁来明日忧

2.4 中文首行缩进

有两种方法可以实现: 1.在段落开头的时候,先输入 :&#160;&#160;&#160;&#160;然后紧跟着输入文本即可 2.把输入法由半角改为全角，两次空格之后就能够有两个汉字的缩进. eg:首行缩进: 　 得到的

2.5 代码块

将要显示的代码块放在 3对反引号 中间, CSDN提供的编译器支持不同的语法高亮, 只要在反引号后注明语言, 例如:

package com.qx.aspectj.annotation;

import org.springframework.stereotype.Service;

@Service("userService")
public class UserServiceImpl implements UserService {

    @Override
    public void addUser() {
        // TODO Auto-generated method stub
// System.out.println(1/0);
        System.out.println("addUser");
    }

    @Override
    public int deleteUser() {
        // TODO Auto-generated method stub
        System.out.println("deleteUser");
        return 0;
    }

}

显示结果： package com.qx.aspectj.annotation;

import org.springframework.stereotype.Service;

@Service("userService") public class UserServiceImpl implements UserService {

@Override
public void addUser() {
    // TODO Auto-generated method stub

// System.out.println(1/0); System.out.println("addUser"); }

@Override
public int deleteUser() {
    // TODO Auto-generated method stub
    System.out.println("deleteUser");
    return 0;
}

2.6 引用

在你希望引用的文字前面加上>就好了 eg:

>我们是IT资源交流分享者

显示效果: 我们是IT资源交流分享者

2.7 水平滚动条

在代码块内,当一行的内容显示不下时,会自动显示水平滚动条

package com.qx.demo05.jdk;

import java.lang.reflect.InvocationHandler;
import java.lang.reflect.Method;
import java.lang.reflect.Proxy;

public class MyBeanFactory {

    public static UserService createService(){

        //创建目标类对象
        UserService userService=new UserServiceImpl();

        //切面类---我感觉它仅仅是个增强类
        MyAspect myAdpect=new MyAspect();

        /**
 * 使用jdk动态代理,创建代理类对象
 * 参1 ClassLoader loader: 类加载器
 * MyBeanFactory.class.getClassLoader()
 * userService.getClass.getClassLoader()
 * 参2 Class<?>[] interfaces:代理类实现的接口
 * userService.getClass().getInterfaces()
 * 参3 InvocationHandler h: 匿名内部类,给目标方法添加事务
 * 
 */
        /**
 * 动态代理
 * 在java动态代理中有一个重要的接口InvocationHandler和一个类Proxy.
 * 
 * 当我们调用具体被代理类的方法时,会转由这个接口中的invoke方法进行调用.我们可以理解为理类获得要调用的方法名和参数,交给InvocationHandler, 并由InvocationHandler中的invoke方法调用具体被代理类中相对应的方法.
 * 参1: ClassLoader loader-定义代理类的类加载器
 * 参2: Class<?>[] interfaces-代理类要实现的接口列表
 * 参3: InvocationHandler h-指派方法调用的调用处理程序
 * 返回值: 一个由指定的类加载器定义,并实现指定的接口的代理类的实例
 */
        UserService usService=(UserService) Proxy.newProxyInstance(userService.getClass().getClassLoader(),
                userService.getClass().getInterfaces(),new InvocationHandler() {

                    @Override
                    public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {
                        // TODO Auto-generated method stub
                        myAdpect.before();
                        Object obj=method.invoke(userService, args);
                        myAdpect.after();

// System.out.println(proxy instanceof UserService);//true
// System.out.println(proxy instanceof InvocationHandler);//false
// System.out.println(obj instanceof InvocationHandler);//false
                        System.out.println(obj);
                        return obj;
                    }
                });



        return usService;  //应该返回代理对象usService, 而不要返回被代理对象userService


    }
 }

显示结果： package com.qx.demo05.jdk;

import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflect.Proxy;

public class MyBeanFactory {

public static UserService createService(){

    //创建目标类对象
    UserService userService=new UserServiceImpl();

    //切面类---我感觉它仅仅是个增强类
    MyAspect myAdpect=new MyAspect();

    /**
  • 使用jdk动态代理,创建代理类对象
  • 参1 ClassLoader loader: 类加载器
  • MyBeanFactory.class.getClassLoader()
  • userService.getClass.getClassLoader()
  • 参2 Class<?>[] interfaces:代理类实现的接口
  • userService.getClass().getInterfaces()
  • 参3 InvocationHandler h: 匿名内部类,给目标方法添加事务

/ /*

  • 动态代理

  • 在java动态代理中有一个重要的接口InvocationHandler和一个类Proxy.

  • 当我们调用具体被代理类的方法时,会转由这个接口中的invoke方法进行调用.我们可以理解为理类获得要调用的方法名和参数,交给InvocationHandler, 并由InvocationHandler中的invoke方法调用具体被代理类中相对应的方法.

  • 参1: ClassLoader loader-定义代理类的类加载器

  • 参2: Class<?>[] interfaces-代理类要实现的接口列表

  • 参3: InvocationHandler h-指派方法调用的调用处理程序

  • 返回值: 一个由指定的类加载器定义,并实现指定的接口的代理类的实例 */ UserService usService=(UserService) Proxy.newProxyInstance(userService.getClass().getClassLoader(), userService.getClass().getInterfaces(),new InvocationHandler() {

                 @Override
             public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {
                 // TODO Auto-generated method stub
                 myAdpect.before();
                 Object obj=method.invoke(userService, args);
                 myAdpect.after();

// System.out.println(proxy instanceof UserService);//true // System.out.println(proxy instanceof InvocationHandler);//false // System.out.println(obj instanceof InvocationHandler);//false System.out.println(obj); return obj; } });

    return usService;  //应该返回代理对象usService, 而不要返回被代理对象userService

🌝 本文主要展示 halo-theme-joe2.0 中的各种样式，方便大家写作的时候进行参考，部分样式可能会在迭代过程中有所变更，请及时关注最新信息。

文本元素

标题

标题

下划线

今天天气很好，你拨通了女盆友的电话 ++1300002225++

加粗

她 气喘吁吁 的和你说：我在跑步

倾斜

你问她为什么有 啪啪啪 的声音，她和你说：我是穿拖鞋跑步的

删除线

你明白了，此刻自己头上正顶着个 绿帽子

引用

那女孩对你说：你还不如跳蛋。

超链接

=== 高清无码套图 50P ===

段落缩进

有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。 ---- 李七毛《我们都不擅长告别》

<p class="indent">
  有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。
  ---- 李七毛《我们都不擅长告别》
</p>

居中标题

<joe-mtitle title="牛鞭牛鞭"></joe-mtitle>

代码元素

行内代码

halo-theme-joe2.0

代码块

<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <p>远上寒山石径斜，白云生处有人家。</p>
  </body>
</html>

#Joe {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  min-height: 100vh;
}

列表元素

有序列表

杜蕾斯(durex)的优点如下：

  1. 耐久（durability）
  2. 可靠（reliability）
  3. 优良（excellence）

无序列表

  • 一个女朋友
  • 二个女朋友
  • 三个女朋友
  • N 个女朋友
  • 卒

任务列表

  •  早餐
  •  上班
  •  午餐
  •  锻炼
  •  睡觉

表格元素

左对齐

表头 1表头 2表头 3
内容 1内容 2内容 3
 
| 表头 1 | 表头 2 | 表头 3 |
| :----- | :----- | :----- |
| 内容 1 | 内容 2 | 内容 3 |

居中

表头 1表头 2表头 3
内容 1内容 2内容 3
 
| 表头 1 | 表头 2 | 表头 3 |
| :----: | :----: | :----: |
| 内容 1 | 内容 2 | 内容 3 |

右对齐

表头 1表头 2表头 3
内容 1内容 2内容 3
 
| 表头 1 | 表头 2 | 表头 3 |
| -----: | -----: | -----: |
| 内容 1 | 内容 2 | 内容 3 |

按钮元素

多彩按钮

自定义自己想要的颜色 

<joe-abtn color="#409eff" content="多彩按钮"></joe-abtn>

自定义图标，达 6000+ 图标任你使用 

<joe-abtn icon="fa-bell" content="带图标按钮"></joe-abtn>

自定义圆角度数，最大 18px 

<joe-abtn radius="12px" content="圆角按钮"></joe-abtn>

搭配在一起任意使用 

<joe-abtn
  color="#409eff"
  icon="fa-bell"
  href="#"
  radius="3px"
  content="搭配在一起"
></joe-abtn>

便条按钮

便条按钮不能自定义色彩，必须使用一个图标，其他的的和上面的多彩按钮一样

<joe-anote href="#" type="secondary" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="success" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="warning" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="error" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="info" content="便条按钮"></joe-anote>

复制按钮

<joe-copy
  title="点击复制"
  content="这是一段美好的鸡汤文"
  color="green"
  bold
></joe-copy>

标签按钮

<joe-anote
  icon="fa-download"
  href="#"
  type="success"
  content="标签按钮"
></joe-anote>

网盘按钮

<joe-cloud type="default" url="" password=""></joe-cloud>
<joe-cloud type="360" url="" password=""></joe-cloud>
<joe-cloud type="bd" url="" password="bn6f"></joe-cloud>
<joe-cloud type="ty" url="" password=""></joe-cloud>
<joe-cloud type="ct" url="" password=""></joe-cloud>
<joe-cloud type="wy" url="" password=""></joe-cloud>
<joe-cloud type="github" url="" password=""></joe-cloud>
<joe-cloud type="gitee" url="" password=""></joe-cloud>
<joe-cloud type="lz" url="" password=""></joe-cloud>

装饰元素

分割线

跑马灯

<span class="joe_lamp"></span>

进度条

<joe-progress percentage="50%" color="#6ce766"></joe-progress>

彩色虚线

可自定义虚线颜色

<joe-dotted></joe-dotted>
<joe-dotted startcolor="#1772e8" endcolor="#4cd327"></joe-dotted>

Tabs

{tabs-pane 第一个}单身狗的故事{/tabs-pane} {tabs-pane 第二个}小说家的故事{/tabs-pane} 
<joe-tabs>
  <div class="_tpl">
    {tabs-pane 第一个}单身狗的故事{/tabs-pane}
    {tabs-pane 第二个}小说家的故事{/tabs-pane}
  </div>
</joe-tabs>

时间线

{timeline-item 2020}10元{/timeline-item} {timeline-item 2021}20元{/timeline-item} {timeline-item 2022}100元{/timeline-item} 
<joe-timeline>
 <div class="_tpl">
   {timeline-item 2020}10元{/timeline-item}
   {timeline-item 2021}20元{/timeline-item}
   {timeline-item 2022}100元{/timeline-item}
 </div>
</joe-timeline>

评论后可见

<joe-hide></joe-hide>

渲染原始内容

主题默认对常用的 HTML 标签进行了样式美化，但有时候你可能不想应用这些样式。比如你想富文本内容中的样式能够原样展示，那么就需要用到这个标签来承载你的内容，该标签内的内容将 不会被外部样式和脚本污染，反之亦然。

俺是个3级标题，我有自己的样式

我是原始内容，可以是任何合法的文本或HTML，我的样式和外界是隔离的

 
<joe-raw-content>
  <div id="_raw">
    <div
      style="padding: 1px 10px;background: linear-gradient(45deg, #329891, #ffe266);"
    >
      <h3 style="color:blue;font-style:italic">
        俺是个3级标题，我有自己的样式
      </h3>
      <p>我是原始内容，可以是任何合法的文本或HTML，我的样式和外界是隔离的</p>
    </div>
  </div>
</joe-raw-content>

头像框

列出了当前主题包含的头像框，方便大家进行选择

头像框

emoji 表情

列出一些通用表情元素，更多请 参见这里

😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😚😛😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😭😮😯😰😱😲😳😴😵😶😷🙁🙂🙃🙄🤐🤑🤒🤓🤔🤕🤠🤡🤢🤣🤤🤥🤧🤨🤩🤪🤫🤬🤭🤮🤯🧐😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😚😛😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😭😮😯😰😱😲😳😴😵😶😷😸😹😺😻😼😽😾😿🙀🙁🙂🙃🙄

媒体元素

图片预览

joe2.0

视频播放器

<joe-dplayer src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4"></joe-dplyer>

Bilibili 视频

<joe-bilibili bvid="BV12h411k7vr"></joe-bilibili>

PDF 预览

<joe-pdf
  src="https://bbchin.com/upload/2022/03/Node%E7%9A%84%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0-0a7b571b1a5b4a0d8f810a253afe7077.pdf"
></joe-pdf>

网易云歌单

<joe-mlist id="6800335663"></joe-mlist>

网易云单曲

<joe-music id="1303046498"></joe-music>

音频播放器

<joe-mp3
  name="天生狂野-柴古唐斯主题曲"
  url="https://bbchin.com/upload/2022/04/%E5%A4%A9%E7%94%9F%E7%8B%82%E9%87%8E-%E6%9F%B4%E5%8F%A4%E5%94%90%E6%96%AF%E4%B8%BB%E9%A2%98%E6%9B%B2.mp3"
  theme="red"
  cover="https://bbchin.com/upload/2022/04/cgts.png"
  autoplay
></joe-mp3>

提示元素

消息提示

<joe-message type="success" content="成功消息"></joe-message>
<joe-message type="info" content="普通消息"></joe-message>
<joe-message type="warning" content="警告消息"></joe-message>
<joe-message type="error" content="错误消息"></joe-message>

注意事项！！！

以上大部分为 webcomponents 组件，且仅在使用 halo-theme-joe2.0 主题时才能生效，请根据实际情况使用。
组件定义文件见主题目录下的 source/js/custom.js。

37
markdown
版权归属： CZ
本文链接： https://www.xzmcz.cn/archives/7
许可协议： 本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权

评论区