51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落
当前位置：工具盒子 > Markdown > 正文

Markdown博客文章编写方式

2024-11-22 分类：Markdown 阅读(7) 评论(0)
  1. Markdown简介 {#1. Markdown简介} ==============================

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

2.语法 {#2.语法}

2.1 标题 {#2.1 标题}

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

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

2.2链接和图片 {#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 粗体和斜体 {#2.3 粗体和斜体}

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

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

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

2.4 中文首行缩进 {#2.4 中文首行缩进}

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

2.5 代码块 {#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 引用 {#2.6 引用}

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

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

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

2.7 水平滚动条 {#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 个女朋友
  • 卒

任务列表 {#任务列表}

  • [x] 早餐
  • [x] 上班
  • [x] 午餐
  • [ ] 锻炼
  • [ ] 睡觉

表格元素 {#表格元素}

左对齐 {#左对齐}

| 表头 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}

{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 表情 {#emoji 表情}

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

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

媒体元素 {#媒体元素}

图片预览 {#图片预览}

joe2.0

视频播放器 {#视频播放器}

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

Bilibili 视频 {#Bilibili 视频}

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

PDF 预览 {#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。

赞(0)
未经允许不得转载：工具盒子 » Markdown博客文章编写方式
标签：

厉飞雨

众生皆苦，唯有自渡！

相关推荐

最新文章

猜你喜欢

快捷分类

云服务器 日常运维 在线免费 开源工具 科学上网 开发笔记 区块链 白嫖帮 新视野 人工智能 网赚思路 Python笔记 Php笔记 Java笔记 链知识 币知识 IOS笔记 Android笔记 Mysql C语言笔记 前端开发 R笔记 Go笔记 mybatis笔记 Golang笔记 数据库 市场营销 软件教程 vps Rust笔记 软件使用 经验分享 Stable Diffusion chatgpt Midjourney 操作系统 Photoscape 加密货币 挖矿 Coze Meta 网络安全 网络运营 开源软件 Github ComfyUI 数字人 Docker笔记 Claude Oracle web3 linux windows mac redis git笔记 nginx kafka maven spring RocketMQ Zabbix ubuntu centos kubesphere ffmpeg jenkins hbase JavaScript笔记 WordPress nginx Hadoop vuejs mongo SQL Server PostgreSQL SQLite ElasticSearch Spark netty zookeeper RabbitMQ ClickHoust cocos2d gradle tomcat Markdown MinIO react Hexo git intellij idea android studio svn C++ spdlog nodejs C WordPress 宝塔面板 vim shell logstash 软件渗透 NeoDB CSS3 HTML Lua笔记 数据算法 嵌入式 debian 红帽RHEL Neo4j jquery