写的一款typecho插件，里面有10个短代码，理论上是上传安装既用。经过测试“typecho默认主题、joe主题”是没有bug，正常使用的，具体看下面:

插件

下载:Typecho短代码插件MyShortcodes.tar.gz非常不错的插件。

演示

[timeline]
[timeline-item title="2023年" date="1月"]项目启动，完成需求分析[/timeline-item]
[timeline-item title="2023年" date="6月"]开发阶段，完成核心功能[/timeline-item]
[timeline-item title="2023年" date="12月"]项目上线，开始运营[/timeline-item]
[/timeline]

[process]
[process-step title="需求分析" icon="fa fa-search"]收集并分析用户需求[/process-step]
[process-step title="设计阶段" icon="fa fa-pencil"]完成UI和UX设计[/process-step]
[process-step title="开发阶段" icon="fa fa-code"]实现功能开发[/process-step]
[process-step title="测试上线" icon="fa fa-rocket">进行测试并正式上线[/process-step]
[/process]

[tooltip text="这是一个提示" position="top"]悬停我[/tooltip]

[accordion]
[accordion-item title="常见问题1"]这是第一个问题的答案内容[/accordion-item]
[accordion-item title="常见问题2"]这是第二个问题的答案内容[/accordion-item]
[accordion-item title="常见问题3">这是第三个问题的答案内容[/accordion-item]
[/accordion]

[progress percent="75" color="blue">项目完成度[/progress]

[icon name="fa fa-home" size="2x" color="red"]首页图标[/icon]

[spoiler title="点击查看答案"]
这是隐藏的答案内容，需要点击才能查看。
[/spoiler]
[tabs]
[tab title="选项1"]这里是第一个选项卡的内容。[/tab]
[tab title="选项2"]这里是第二个选项卡的内容，可以放任何东西。[/tab]
[tab title="选项3"]这里是第三个选项卡的内容。[/tab]
[tab title="选项4"]这里是第四个选项卡的内容。[/tab]
[/tabs]
[alert type="success"]恭喜你，操作成功！[/alert]
[alert type="warning"]这是一个警告信息，请注意。[/alert]
[button url="https://www.example.com" color="green" size="large" blank="true"]点击访问示例网站[/button]

[column width="1/2"]
这是第一栏的内容。
[/column]
[column width="1/2"]
这是第二栏的内容。
[/column]

好像绝大多数主题都是适配的。。

复制代码

下载上面的文件>安装后，复制下方短代码到你编辑中保存就可以了。

<!-- 时间线示例 -->
[timeline@]
[timeline-item title="2023年" date="1月"]项目启动，完成需求分析[/timeline-item]
[timeline-item title="2023年" date="6月"]开发阶段，完成核心功能[/timeline-item]
[timeline-item title="2023年" date="12月"]项目上线，开始运营[/timeline-item]
[/timeline@]

<!-- 流程图示例 -->
[process@]
[process-step title="需求分析" icon="fa fa-search"]收集并分析用户需求[/process-step]
[process-step title="设计阶段" icon="fa fa-pencil"]完成UI和UX设计[/process-step]
[process-step title="开发阶段" icon="fa fa-code"]实现功能开发[/process-step]
[process-step title="测试上线" icon="fa fa-rocket">进行测试并正式上线[/process-step]
[/process@]

<!-- 提示框示例 -->
[@tooltip text="这是一个提示" position="top"]悬停我[/tooltip@]

<!-- 手风琴示例 -->
[@accordion]
[accordion-item title="常见问题1"]这是第一个问题的答案内容[/accordion-item]
[accordion-item title="常见问题2"]这是第二个问题的答案内容[/accordion-item]
[accordion-item title="常见问题3">这是第三个问题的答案内容[/accordion-item]
[/accordion@]

<!-- 进度条示例 -->
[@progress percent="75" color="blue">项目完成度[/progress@]

<!-- 图标示例 -->
[@icon name="fa fa-home" size="2x" color="red"]首页图标[/icon@]

<!-- 剧透内容示例 -->
[@spoiler title="点击查看答案"]
这是隐藏的答案内容，需要点击才能查看。
[/spoiler@]

[tabs@]
[tab title="选项卡1"]这里是第一个选项卡的内容。[/tab]
[tab title="选项卡2"]这里是第二个选项卡的内容，可以放任何东西。[/tab]
[tab title="选项卡3"]这里是第三个选项卡的内容。[/tab]
[tab title="选项卡4"]这里是第四个选项卡的内容。[/tab]
[/tabs@]


[@alert type="success"]恭喜你，操作成功！[/alert]

[@alert type="warning"]这是一个警告信息，请注意。[/alert@]


[@button url="https://www.example.com" color="green" size="large" blank="true"]点击访问示例网站[/button@]


[@column width="1/2"]
这是第一栏的内容。
[/column@]

[column width="1/2"]
这是第二栏的内容。
[/column@]

<!-- 注意：分栏后最好加一个 <div class="clearfix"></div> 来清除浮动，以防布局错乱 -->
<div class="clearfix"></div>

复制粘贴时，去掉@字符。