番组开发#1 - 2019-5-21 02:08
Cedar (｡´-д-)
进化！超代码块
组件链接
脚本安装
备用安装
查看源码
请先启用组件/脚本再阅读! 后面的示例效果都只有启用组件的人才能看到!
另外, 代码块不只是拿来展示代码的,
利用它不会换行 上下对齐 周围有框的特性, 你还可以用它来做点别的
比如展示表格(示例1, 示例2(看里面的截图)), 展示字符画等等..
功能:
删除空行
设置字号
折叠隐藏
增加标题
定制字体
针对Code块生效.
==========
开始前的小提示
1. 其实不需要读完使用指南就能用. 只是读完了能用得更好.
2. 由于代码块中不能写[/code], 所以示例里我都把[/code]省略了：
3. 代码块的第一行其实在 [code ]的右边：
==========
初级用法
幼年期前期
什么也不用做! 只需要启用组件.
多余空行会被删除. 立即生效.
效果:
==========
中级用法
幼年期后期
前往设置页面, 右侧可以自定义Code块的字体和大小
示意图：
font-size 类似于BBCode中 size 后面的数字.
font-family 要手动填写字体名称. 如果字体本身有空格 要用单引号或者双引号引起来. 建议使用等宽字体!
支持增加多个字体, 用英文逗号分隔开. 浏览器会自动从左到右查找你电脑中的字体, 优先使用你电脑里有的那个. (所以其实写一个字体就够了..)
一个font-family的例子:
==========
注意!
初级和中级用法都只会在自己浏览器上生效,
而下面的用法会在所有开启组件的人的浏览器上生效!
如果你按下面的方法做, 那么其他组件使用者也能看到相同效果.
而如果有人的代码块写成了下面的样子, 那么在你的浏览器上同样会生效.
当然, 如果不启用组件就看不到效果啦.
==========
高级用法
成长期
设置可折叠的代码块!
效果类似这样：
如果代码块的第一行只包含等号(至少3个), 类似这样：
那么所有启用组件的人看到的这个代码块会自动折叠,
上方出现 展开/折叠 按钮. 而且不会显示第一行的那排等号. 像这样：
如果在等号两侧加上英文感叹号：
那么效果与上面相同, 只是代码块会默认展开：
==========
特级用法
成熟期
为可折叠的代码块增加标题!
如果在代码块第一行的文字前后添加至少3个等号, 类似这样：
那么这个代码块不仅可折叠, 那行文字还会自动变成它的标题：
同样的, 如果在首尾两侧加上英文感叹号：
那么代码块就会默认展开：
==========
超级用法
完全体
单独针对某个代码块自定义字体样式!
如果代码块第一行的写法类似这样：
那么整个代码块会被定制成这样(要求你的电脑支持日文字体 "MS PGothic" 或 "ＭＳ Ｐゴシック" )：
你还可以这样写：
或者这样：
事实上, 可以设置的东西不少! 如果有CSS基础, 那么应该很容易看懂.
对于看不懂的..大概解释一下：
备注：设置字体的这一行不会像之前设置标题时一样被删除.
保留的原因是其他人可以对照设置的内容安装自己电脑里没有的字体.
==========
究极用法
究极体
你可以同时设置折叠, 标题和字体!
写法是
第一行设置标题和折叠
第二行设置字体样式：
效果就像这样：
==========
目前发现的小问题
如果你在Code块外面设置字体大小, 像这样：
那么标题和隐藏按钮的字体会跟着改变.
虽然我觉得不会有人这么做, 因为这么做并不能调整Code块本身的字体大小, 是毫无用处的写法..
教程结束, 感谢阅读!
=========
备注: 代码高亮等以后吧..现在暂时不弄了..况且在这儿分享代码的人也不多..
《使用指南》
组件链接
脚本安装
备用安装
查看源码
请先启用组件/脚本再阅读! 后面的示例效果都只有启用组件的人才能看到!
另外, 代码块不只是拿来展示代码的,
利用它不会换行 上下对齐 周围有框的特性, 你还可以用它来做点别的
比如展示表格(示例1, 示例2(看里面的截图)), 展示字符画等等..
功能:
删除空行
设置字号
折叠隐藏
增加标题
定制字体
针对Code块生效.
==========
开始前的小提示
1. 其实不需要读完使用指南就能用. 只是读完了能用得更好.
2. 由于代码块中不能写[/code], 所以示例里我都把[/code]省略了：
[code]我是示例
请假装这里有个[/code ]→
3. 代码块的第一行其实在 [code ]的右边：
[code]我是代码块的第一行
我是代码块的第二行, 不是第一行
其他内容
==========
初级用法
幼年期前期
什么也不用做! 只需要启用组件.
多余空行会被删除. 立即生效.
效果:
_ _ . _ _
\_| | \ | | \/| |_/
\
https://www.asciipr0n.com/pr0n/anime.html
| .-.
| / \ .-.
| / \ / \ .-. .-. _ _
+--/-------\-----/-----\-----/---\---/---\---/-\-/-\/\/---
| / \ / \ / '-' '-'
|/ '-' '-'
https://www.asciiart.eu/art-and-design/other
XXX XX XX XXXX XXXX XXX XXXXX XXXXXX
XX XX XXX XX XX XX XX XX XX XX XX
XX XX XXXX XX XX XX XX XX XX XX XX
XX XX XX XXXX XXXX XX XX XX XXXXX XX
XXXXXXX XX XXX XX XX XXXXXXX XX XX XX
XX XX XX XX XX XX XX XX XX XX XX
XX XX XX XX XXXXX XXXX XX XX XX XX XX
https://www.asciiart.eu/computers/fonts
==========
中级用法
幼年期后期
前往设置页面, 右侧可以自定义Code块的字体和大小
示意图：
font-size 类似于BBCode中 size 后面的数字.
font-family 要手动填写字体名称. 如果字体本身有空格 要用单引号或者双引号引起来. 建议使用等宽字体!
支持增加多个字体, 用英文逗号分隔开. 浏览器会自动从左到右查找你电脑中的字体, 优先使用你电脑里有的那个. (所以其实写一个字体就够了..)
一个font-family的例子:
'Bitstream Vera Sans Mono',"WenQuanYi Micro Hei",Consolas
==========
注意!
初级和中级用法都只会在自己浏览器上生效,
而下面的用法会在所有开启组件的人的浏览器上生效!
如果你按下面的方法做, 那么其他组件使用者也能看到相同效果.
而如果有人的代码块写成了下面的样子, 那么在你的浏览器上同样会生效.
当然, 如果不启用组件就看不到效果啦.
==========
高级用法
成长期
设置可折叠的代码块!
效果类似这样：
!===!
恩？你知道上次问我三围的用户去哪里了么？
——Bangumi娘
如果代码块的第一行只包含等号(至少3个), 类似这样：
[code]===
那么所有启用组件的人看到的这个代码块会自动折叠,
上方出现 展开/折叠 按钮. 而且不会显示第一行的那排等号. 像这样：
===
恩？你问我上次那个问我三围的用户去哪里了？
他 转 学 了。
——Bangumi娘
===
我头上的天线虽然接收信号的能力还不太明确，
那个弧线的造型用来切开尸体可是非常顺手的呢。
——Bangumi娘
如果在等号两侧加上英文感叹号：
[code]!===!
那么效果与上面相同, 只是代码块会默认展开：
!===!
你将遇到的不幸、是你所蹉跎时间的报应。
——Bangumi娘
==========
特级用法
成熟期
为可折叠的代码块增加标题!
如果在代码块第一行的文字前后添加至少3个等号, 类似这样：
[code]=== ASCII 迷宫 ===
那么这个代码块不仅可折叠, 那行文字还会自动变成它的标题：
=== ASCII 迷宫 ===
Art by Sonic
.__ __ __ __ __ __ __ __ __ __
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \
\__/ __ __/ / __ \ / / __ __ /
/ __/ \__/ __/ \ / \ / \ / __/ __/ \__/ \
\ / / __/ __/ \ \ / \__/ __/ \__ \ /
/ \ / __/ __/ / \__/ \__ \ / __ \__ \
\ / \__/ \ / __/ \ / __/ __/ __/ __/ \ /
/ __/ / __/ \ / \ / __/ \__/ __/ __ \
\ / __/ \__/ / \ / __/ __/ __/ __/ \__/
/ \ / \ \ / __/ __/ __ \ / __/ __ \
\__/ \ / \__/ \__/ \__ __/ \ / \__ __/ __/
/ __/ \__ __/ __ \__/ __/ \ \__/ __/ \
\ / __ \__/ __/ __/ __/ __/ \ / __/ /
/ \__ \__ \ / __/ __/ __/ __/ \__ \ / \
\ / \__ \__ \__ __/ __/ __/ __/ \ / \ /
/ \ \__ \__/ \__/ \__ \ / __/ __ \__/ \
\ / \__ \ / / __ \ / \ / \__ \__/ __/
/ __/ \ / \ / __/ __/ \ / __ \__ __/ \
\__/ / \ / \__/ __/ \ / \__/ \__ \__/ /
/ __/ __/ \ / __/ __/ \ \ \__/ __/ \
\ / \ / / \ / __ __/ \__ \ / __/ \ /
/ \ / \ / \ / \ / \ / __/ \__/ __/ __/ \
\ / \ / \ / \__ \ \__/ __ \__/ / \ /
/ __/ \__/ \ / __/ \__ __/ \__ __/ \ \
\__/ __ \ / \__/ \__/ \__/ / \__/ \__/ \__/
/ \__ \__ \__ __ __ __/ __ __ \__ \
\ / \__/ \__/ \__/ \__/ \__/ \__/ \__/ /
/ Start \ \ end \
\__ __/ / __/
\__/ \__/
https://www.asciiart.eu/art-and-design/mazes
同样的, 如果在首尾两侧加上英文感叹号：
[code]!=== Art by jiri ===!
那么代码块就会默认展开：
!=== Art by jiri ===!
__
/ /\
/ / \
/ / \__________
/ / \ /\
/_/ \ / /
___\ \ ___\____/_/_
/____\ \ /___________/\
\ \ \ \ \ \
\ \ \ \____ \ \
\ \ \ / /\ \ \
\ / \_\/ / / \ \
\ / / /__________\/
/ / / /
/ / / /
/________/ /\ /
\________\/\ \ /
\_\/jiri
https://www.asciiart.eu/art-and-design/escher
==========
超级用法
完全体
单独针对某个代码块自定义字体样式!
如果代码块第一行的写法类似这样：
[code]font: 16px/18px "MS PGothic", "ＭＳ Ｐゴシック";
那么整个代码块会被定制成这样(要求你的电脑支持日文字体 "MS PGothic" 或 "ＭＳ Ｐゴシック" )：
font: 16px/18px "MS PGothic", "ＭＳ Ｐゴシック";
名前： ◆ByNEETW0zI ：2009/04/03(金) 20:12:27 ID:au7+QwQG
██▍ █▍███▀ ██▋█▊ ▌██▊ █ █ ██▊▆▃ ▀▓▓▓▓▓▓██
██ █▌██▋ █ █▊█▌ ▋█▊▋ █ ▊ ▀█▋██▆▃ ▀▓▓▓▓█▌
█▊ █▋█▀▌▂▃█▃█▉█▎ ▊█▌▌ █ ▋ ▀▋████▆▃ ▀▓▓█
█▌█▊█ ▌ ▉ ███◥◣ ▉█▍▍ ▉ ▌ ▂▃▊██████▆▃ ▀▌
█▊██▌ ▌ ▊ ██▊ ██▎▍ ▊ ▍ ███ ██████▆
████ ▍ ▋ ██▌▂ ██▎▎ ▋ ▎ ██▊ ████▊█▌
███▌ ▃▅▃▂◥◣ ▼▓▓ ██▍ ▌ ██▌ ███▋██
███ ▅█▀▃▀█▆▃◥◣ ▓▓ ██▌ ▍▂▃▅◤ ▼ ██▋██▎
██▌ █▎▲▂▲ ▀█▅▃▼ ▀▀◣ ◢▓▓▂▃▃▂ ██ ██▌
██▍◥█ █▓██▌ ▀◣ ◢◤ ▃▅▃▂▃▅▆▇▅▃▅◤██▎
▊█▎ ▼ █▓█▓▌ ▍ ◢▀◣▂▃██▅ ▼ ▉█▌
█ ▀◣ █▓▓▓▎ ▐▓██▓█▌ ◢◤ ▊█▊
█▌ ▀▅▃◤ ▐▓██▓▓◤ ▋██
██ ◥◤▀ ▀▅▃▅◤ ▌██▎
██▌ ▀◥◤ ▍██▌
███◣ ▋ ▌ ▍ ██▊
███▌ ███
████◣ ▍ ███▎
█████▅ ◤ ▅███▊
https://aa.tamanegi.org/anime/k-on/mio/
你还可以这样写：
[code]font: italic small-caps bold 16px/18px Arial, sans-serif;
或者这样：
[code]font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 16px; line-height: 18px; font-family: Arial, sans-serif;
事实上, 可以设置的东西不少! 如果有CSS基础, 那么应该很容易看懂.
对于看不懂的..大概解释一下：
=== 写法解释 ===
写法是 -> 属性: 值; 属性: 值; 属性: 值;
分号和冒号是英文的, 不能省略, 紧挨着冒号和分号的位置可以添加空格.
属性一共有6种, 前三种比较常用.
font-size: 16px; --> 表示字体大小是16像素
line-height: 18px; --> 表示一行高度是18像素
font-family: Arial; --> 设置字体为Arial.
可以写多个字体, 写法和含义参考"中级用法".
区别是现在要在最末尾加个分号.
因为这样设置后, 在其他组件使用者的浏览器上也会生效,
所以最好写个大部分人都在用的字体. (比如 "微软雅黑")
或者你可以多写几个字体, 至少保证其他人的电脑能显示成你想要的字体.
font-style: italic; --> 表示字体样式是斜体(italic)
font-weight: bold; --> 表示使用粗体(bold)
font-variant: small-caps; --> 表示把字体变成 small-caption 的样子 (小写字母也大写)
上面三个属性的值都只有特定的几种, 可以自行搜索了解.
属性不需要写全, 比如你可以只设置字体:
[code]font-family: Arial, sans-serif;
如果你想同时设置前三种(大小, 行高, 字体)可以简写成这样:
font: 16px/18px Arial, sans-serif;
但如果只写其中的一个或两个(比如字体和字体大小), 那必须分开写.
font-size: 16px; font-family: Arial, sans-serif;
虽然简写成 font: 16px Arial, sans-serif; 也能生效, 但是会导致行高出错!
更多内容请搜索 "css+对应属性" 了解.
备注：设置字体的这一行不会像之前设置标题时一样被删除.
保留的原因是其他人可以对照设置的内容安装自己电脑里没有的字体.
==========
究极用法
究极体
你可以同时设置折叠, 标题和字体!
写法是
第一行设置标题和折叠
第二行设置字体样式：
[code]=== 字符画！===
font: 16px/18px "MS PGothic", "ＭＳ Ｐゴシック";
效果就像这样：
=== 字符画！===
font: 16px/18px "MS PGothic", "ＭＳ Ｐゴシック";
名前：一手義雄 ◆YYYYeqzEEE ：2007/10/27(土) 16:14:09 ID:7XYWlXua
_ r､
〃 ＼ .||＼､
|| ＼､|| |i
|| ＿_}:||＿||__
||. ´.:.:.:.:.｀{:.:.:.||:.:.:｀＼
／|l:.:.:.:.:.:.:.:.:.:.:.:.:.:l|:.:.:.:.:.:.:.＼
／:.:.:,:.:/.:/.:.:.:/.:.:.:.:.:.:.:＼:.:.:､:.:.:.＼
／／/:/:/.:/.:.:.:/.:.:.!:.:.:.:.:.|:.:.:＼:.＼:.:.:ﾍ
. ／:.:/:.:/:/:/.:/.:.:.:/:.:/.:l:.:.:.l:.:.!:.:|:l:.:.ﾍ:.:.ヽ:.ﾄﾐ､
/ｲ:.:/:.:/:.:!:.:!:.:|:.:_厶:/|ﾊ|:.:.:.!:.:l:-|:L_:.:.!:.:.:|:.|:|:|
i:/:.:/.:.:.:!:.:!:ｨ!´/ l/ ＼ﾄ､|ﾊ|ﾊ､｀:|!.:.:|:.|:|:|
|l |.:|:.|:.:.|:.:|.:||:,ｨぅ弌 卞ぅｘ､:}|.:.:|:.|:|:|、
|.:|:.|:.:.|:.:|.:|ﾊ{んr'} {んr'}ﾊ|:.:ﾊl|ﾊﾄﾐ、
|∧|:.:.|:.:ﾄﾐ､ ﾏ少 , ﾏ少 /|/}:.:.:.:.ヽ. ＼
／乂{从_ﾍ、' ' r ┐ ' ' /_.ｨ《:.:＼:.:.:.＼ ヽ
/´＿〃|:.:≫:.＼ ｀ ´ ／＼__｀＼:.:＼:.:.:!ヽ
／´＿,||_,|:{{ ／ ｀ト:t----r ´} ＼｀＼Y} ヽ| }
／／´ |! Ｘ、 '(: :｀￣´: :/ ＼/ﾘ .ﾉ
/ く ／ '(: : : : : ,′ ／ ヽ、
⌒＼＼ .∧ ＼__ '(: : : :,′ ./ /⌒ﾏ
＼＼|/ ＼__ ＼ , -､ '( : /えﾆヽ ／ ／ !
ヽﾑ--､ ＼__/ ﾆﾕ_∨ ｆﾆヽ }≦-､ 厂|
{ ＼ /､ ＼ ﾆJ-〉ﾑィ´￣ ／ !／ ｜
∨ /＼＼ ＼ ＼-一 ¨´_／| ′
∨ 〈 ＼＼ ｀¨７´￣￣ 〉／.′
| /＼ 丶 ニ７ﾊ,＿＿＿／ } |
| ７ ＼ ＿__,/ 丁Ｖ '( |
|/ / { ∨ ヽ. Ｖ
/{ /｀○.} 〈 ∨
/ ＼ イ ′ ＼ ﾉ＼
. / ゝー＜´| | ｀＞ ´/ ヽ
〈 ＼／ | ＼／ ﾉ
∧ ○ | {
く／} | ,ﾊ
／: :〈 / ∧/
＼／:＼ ∧ ∧: 〉
／: : : : /＼ / : iﾍ ＿__,／: :l:「
＼ : : /: : : :｀ﾒ . ＿,/ : : | : :vイ´ : | : ヽ: : |:|
｀ 7: : : : :/: : : : : | : : : : l: : :|: |: : : |: : :∧/｀
￣￣/: : : : : : | : : : : | イヽ|／´レｲ
￣「￣￣｀ ー┬′| |
i | | j
'. ! | ∧
' | ｌ ﾊ
' | '､ / ',
' | ＼＿,/ |
} | ヽ |
https://aa.tamanegi.org/anime/clannad/
名前：（*ﾟДﾟ）さん：2009/09/27(日) 21:13:37 ID:7kZQ8qh4
／:::::／::::::::::::i::::::::::::｀ヽ
/:::::／:::／':::::::::l:i::::::::::::::ヽ＼
/::::/::::／〃::::::::/ﾊ::j::::::::::::i::::::ヽ
{:::〃::/‐/ {:::::／/､|::|:ｉ:::::}:::|:::::::::.
Ｖ/::;rｧﾐ, ∨ ＿ |::|:ｉ:::/::::ミヽ:::}
/::/ ﾋﾝ ´ん _,ト|:::/::::/=-::::ﾊ
__ /:::{ '" ' 弋ｰｿ::::::::::/三彡:::::i
／ iJT} }ｰ―‐┐ "/:::::::::/}:::::::ｲ ::::::|
, ′ /ｰ'ﾝ'＾ヽ＞く´ _/:::::::::/ノ／ ｌ::::::::|
/ ｰ '__／:::/. -- ､_ﾉ￣／:_::::／¨´ |::::::::|
/ / /:::／ ,. '´ ヽ |::::::::|
/ l./／ } / } |::::::::|
,′ |'| | / / ,' |::::::::|
l l l l / / , ' / |::::::::|
| / l`'＜{＿___/ / /} |::::::::|
l .ィ"i＾)ミ:=彡7 , ﾍ._/ノ |::::::::|
｀¨´ l::::l ｿ ＜,/ /ﾆ彡7 |::::::::|
l::::l }､｀7 /¨´／'! |::::::::|
|::::| (ﾐＶ /､／ ,} |::::::::|
|::::l }/ / 人 |::::::::|
|::::| / /｀ ｰ---- ｲ |::::::::|
＿_ |::::l / / ／ | |::::::::|
ｰT ￣ | ￣ 7 /===＝彡-ｰ ﾍ |::::::::|
l l / / ／ -―＜ミ＼ |::::::::|
| ｜ / /ミＺ彡'"´￣￣｀ヾ＼) |::::::::|
https://aa.tamanegi.org/anime/k-on/azusa/
名前：はっちん ◆hachi6ACAU ：2010/07/12(月) 20:24:04 ID:kkdcj16B
-='⌒＼ ,,,,,,,,,
〃／: : : 厶,,,;;;;;;;;;;;;;;;;,,
´￣⌒^'＜彡ﾍ;;;;;;;;;;;;;;;;;;;;,
／: : : : : : : : : : : : : ＼:｝;;;;;;;;;;;;;;;;;;;
／ : : : : / : : : |: : : : : : : : ヽ;;;;;;;;;;;;;;;;;;
/: :/ : : : /|: : : : |: :|: : : ＼: :.∧;;;;;;;;;;;;;;;;;,
|: / : : :.:/ :| | : : : :∧: : : :.:∨:/|;;;;;;;;;;;;;;;;;;;,
Ｖ : : : /⌒| |: : : ﾘ⌒＼:| :.:.|/: |;;;;;;;;;;;;;;;;;;;;
|: : : :.| |八: : | 斗ぅ尓 :.:|:/ﾘ;;;;;;;;;;;;;;;;;;;;
|: : : ィアぅ､ ＼| Viン∨:! Y;;;;;;;;;;;;;;;;;;;;
|八: ｲ Vﾝ : :.|ノ;;;;;;;;;;;;;;;;;;;;'
|:::::. ' |::::|;;;;;;;;;;;;;;;;;;;;;;'
|:::::ﾍ _ ｲ|::/;;;;;;;;;;;;;;;;;;;;;
＼::::ﾘ ＞,、 イ :::|/;;;;;;;;;;;;;;;;;;;;;;;
∨ /:｝ ´ {::::::|;;;;;;;;;;;;;;;;;;;;;;;;;;
／ 丁¨T ´ '′ ＼:|;;;;;;;;;;;;;;;;;;;;;;;;;;;,
/ │|::ﾊー- ､ ｀トr､_;;;;;;;;;;;;;;;;;,
│|::| - ‐一| |::| `ト､;;;;;;;;;;;;,
│ } |::| ＼ / ::| | ;;;;;;;;;;;;,
| ∨ l::|...........ー───＜.. |::| | |;;;;;;;;;;;;;;;,
| /.. |::|...........................................|::| | |;;;;;;;;;;;;;;;;;
| ′..|::|.......................................... l::|...j/ ;;;;;;;;;;;;;;;;;;
l ′.. |::|.................∧................... l::|...l ,;;;;;;;;;;;;;;;;;;
l |.........|::|........_＿/ ,＿_.......... |::|...| /;;;;;;;;;;;;;;;;;;
} !....... |::|.......＼ ／..........|::|...l /;;;;;;;;;;;;;;;;;;;;
∧...../::............./ '...............|::|..ﾉ;;;;;;;;;;;;;;;;;;;;;;;
' |....∨::/...........｛_／＼_｣ ............|::l/│;;;;;;;;;;;;;;;;;;;
| |......|:::|..............................................::::| |;;;;;;;;;;;;;;;;;;;;
https://aa.tamanegi.org/anime/k-on/azusa/
=== 更多字符画！===
font: 12pt/1em "MS PGothic", "ＭＳ Ｐゴシック", "Trebuchet MS", Verdana, Futura, Arial, Helvetica, sans-serif;
＼＿ ￣〃⌒＞''" ／/ /弋-^｝､_,,..-―┐
／｛(⌒ヽ{{ィ'" { {:::::::ゝ-‐ﾍ_／⌒ﾄ〉
-=彡 __＞'" ゞ乂::::::弋二 ）ﾆ彡
｛／ ＿＿ /寸至ﾐ┘＼ ＿,,.ィ'"￣｀丶､
/ ＞''"￣￣j ヽヽ￣￣ 寸ﾐ沁 ｀～'" ￣￣｀ヽ､ ＼
{ ヾУ/ / ／ ノi i ! i圭翁 ＼ ＼
i / / __/ ／ l l l ! i i i }圭ミ} ⌒ヽ>
i { { {'"/ !// ⌒jﾉトl､ } } } } r''^}圭ｼ
弋_ 人 λ沁{ ｱ芍ミx､j j / / ( _j㌢
rl ￣ `ト代} ｛代;ｿ癶 / / ｝l爪
}`ー 彡i ヽ::.. ｀""// ／ノ ノ{__ゝ＞''"~￣i
／ 〈￣￣ ゝ、 ゝ __, ／彡～'"／ ／ ''"￣＿ {
〈 ん＞..＿.......イ/__ /／／ 斗＝''"
／＼ 「i}ﾉ //￣￣ 7＿＼ ／ ／⌒`┐
{｛ ｛ {＼ ＿ ∠ -弐|_// ＿ ／ ヽヽ/廴／ '"~ __{
／ ＼ ゞﾐ〕 /__,,,..-:::フ-「ヽ￣ 〃 } 乂_// ／￣
{/⌒ ￣／ ヽ ／／ //} 〉 〃__彡 / { { /-―～⌒`ヽ
し /::::::::／／/ ／ {/ /￣ /{ ⌒`～⌒ヾ下ﾐ、｝
{::／／ //=/ / ￣{ λ jﾉノﾉノ
／／:::::::j{l:::/__/:::::::::У⌒ヽ 〉 ｛f"
／／>ﾐ:::＼{ll:::::::::::::::_／⌒ヽ )ﾉ__＿／
／／ /7:::⌒〃`ミ;;;;;／⌒＼ }/
／／ //::::=≠=:::::r-く У
／／ ＿／/:::::::〃::＞'"ヽ ／
／／ 〈-∠:::-‐''"￣ ／
/ / ／￣ ,,..イ::｝
/ /_/7 ,.イ |:::::::λ,,.. -‐―┐
／／/｛ ＞'"::::::::j j::::::::::ﾊ-''"￣癶}
У｛-弋ヽ ／:::::::＞-/⌒`～-ﾐ｝-‐'" ノ
-┴": : : : l:`ｰ┬―く -‐'": : :/ : : : : : : : :ﾍ-―-､ ＿＿
: : : : : : : : :l : : :!: : : : : : : :/ /／ : : : : : ＼: ＼二二 -――- ､￣`''～-､
: : : : : : : : : : : :i: : : : : : : : :／: : : : : : : : : : ヽ: :＼ ＼ ｀ヽ ｀'''～､ ＼
"⌒＼: : : : : : :l : : : : : : :/ : : : : : : : : : : : : : ﾍ: : :＼ ヽ ＼ ＼～`
http://anime.en.utf8art.com/arc/madoka_magica_714.html
／::::::::::::::::::::/::::::::::::::::::::::::::::｀ヽ
／:::::::::／:::::::::/::::::／:::::/::::::i::::::::::::..
／:::::::::／::/:::::::/::::メ､:::／/:::::/::::/::::i:::.
／::::::::::::,r⌒i:::::::::,ﾚ_´__／｀ﾞ/:::::/:::/::::::;'::::i
／:::::::::::::::::ﾊ i:::::::::'､ら::::}｀ヽ/::／::/j::::::/:::::l
／:::::::::::::::::::/:::::ゞ;|::::::::! ｀¨´ /´/／‐-:::/:::::::!
／::::::::::::::::::::::/}:::::::::::|::::::::! r芋ﾐi:::'::::::::;
.／:;ｨ::::::::::::::::::::/ノ::::::::::::|:::::::| _ ' ヾ:ｿ::::::::::::/
.／／/:::::::::::::::::＞ ´￣ ｀ヽ乂:::| ｀ /:::::::::::/
／／ /:::::::::::::r'´ ７´￣ ｀ヽ. ｀ヽ::ヽ .。イ:::::::::::/
／／ ,:::::::::::::::::! { ＼ヽ::ヽ=-=≦::/ /::::::::::/
／ ,.::::::::::::::::::::i. iﾘ, ＿_ ＼'::::.,`ー-/__.!::::::／
.,.'::::::::::::::::::::::l } ｀ﾞ ､} ハ::::.¨ヾ: : : : :￣ ''ー-,
.／::::::::::::::::::::::::ﾊ._/ |/ ';::::,＼V､: : : : : : : : {
.／:::::::::::::::::::::::::::::::／ ,.ｨf三≧!::::}､ ｀: :＼￣￣ '' ー- ..,,_
:::::;ｨ:::::::::::::::::::::::／ __ ,ｨﾑ::/::::::::/::/ ヽ: : : :.ﾄ､￣￣ '' ｰ､- .,￣ ー- ..,,
／/:::::::::::::::::／ ｨ=-‐ '',.r::/:;r:::⌒:y:::ノ ',: :;' ＼ ｀ヽ `ﾐｰ- ..,,: : ヽ
./::::::::::::::∠ ,.ｨ'"´ ,'. /ﾑ:/:/:::::::::i::;' ∨ V:､ ヽ: ＼ ｀ヽ: :',
/:::::::::::::::::::::／: : : :/ i. //::/:/::::::::::;':/ }: ＼: ＼:.＼ .}: :.}
,::::::::::::::::::::::`ー- :/.､ l_ 〉:::/::/:::::::::::::; iｰ- ..＼ ﾏ: :ﾊ ヽ:ﾉ
::::::::::::::::::::::::::::::::V ､ ヽ/:::〈:::i:::::::r i:::ハ _ノ i ￣ ﾏ: ﾊ
:::::::::::::::::::::::::::::::::ヽ ヽ/:::::::::}:::::::::j/::;' }ｨ彡 ‐- l i: : }
:::::::::::::::::::::::::::::::::::{::｀ﾊ:::::::／￣ ｀:V ﾉ | j;,ノ
::::::::::::::::::::::::::::::::::::ゞ/::}／;'.⌒ヽ:::::j / i
::::::::::::::::::::::::::::::::::::::::{::;j::::乂__.ノ／／ i
:::::::::::::::::::::::::::::::::::::::i／::::::::::::／／ , -‐- ､ ,
::::::::::::::::::::::::::::::::::::::乂__／￣／ ／/７/,' ﾊ ',
::::::::::::::::::::::::::::::::::::::::::::::::::::／ ／:.:/:///:/ハ ヽ
http://anime.en.utf8art.com/arc/madoka_magica_758.html
Χ┼Χ┼ΧΧ┼Χ┼Χ┼Χx＋｀ ´ ´" ←Χ┼Χ┼Χ┼
┼Χ┼Χ┼Χ┼Χx＋`｀ ∠=-‐‥‥‐-=＼ ´"+_┼Χ┼Χ
Χ┼Χ┼Χx＋`｀ ／ ／ ヽ ´+_┼Χ＋
---－‥ `｀ _,,..､xＸ'" ∠=-‐‥・･・冖・・‥‐-=| | ´+_Χ┼
..､ - ‐ ┼→`｀ , '′ / | | ┼Χ
┼Χ┼Χ┼→ `｀ ﾞ / / ,i | | `､ ‐_┼
Χ┼Χ十`｀ ,: / // / ; ハ ,ﾍ | | `. ‐X
┼x＋´ .､ ゛ .´ / /ｲ / ; / } / ', | | ‐
＋´ ､x＋ / ' ｜/ ; / ｊ/´￣下、| | _
､xＸ┼ ∧ /=-l/''"´ﾉ '′ -‐ | |
､xＸΧ┼ /√V -‐ kiﾔ㌢ﾐﾒ ￤
／┼Χ┼' / /j/ ,.kｉﾔ㌢ﾐヾ r'､::::;ﾊ ,
Ｘ┼Ｘ┼' / /从 《{ r'､::::;ﾊ ..ゞ 'ﾟ ,
┼Ｘ┼' ､ / ∧ ..ゞ 'ﾟ 、 /／/ ; ;
Χ┼/ 、 /／ｉ{ ﾍ ／/／/ ／; ; ;
ｘΧ/ ／ _+ , ."..:八 :、 _／ ; ; ､ ;
Χ/ ／ / _Ｘ┤ ; . ..:.:＞込、 ´ ／ ; ; 、
ｘ/ ' x/ _+Ｘ┤ i . : :.::/i:i:i:i:i:i:i＞ .._ ／ ; / _+ ､
/' ｘX/ _+Ｘ┼, | . . :/:i:i:i:i:／.:i:i:i:ｉ:i:i:ｉ: : イ ‐-‐ ７ / / _+＋ ﾞ
ｘΧｘ/ _+Ｘ┼ /, | . :/i:i:i:／.:i:i:i:i:i:i:i:i:i:ｉ:ｉ:r┴─┰/ / / _+┼ ∧
ｘΧ/ _+Ｘ┼ / :. | :/:i:∠.,_i:i:r‐-=ﾆ二ノ￣￣￣/ , ; / _+┼ /Ｘｘ
Χ/ _+Ｘ／ , ′〝. |/:i/⌒ ｀`} ｀`ヽ、 / ／ ﾉく__ｘＸ┼' /┼Ｘ _
ｘ/ _+／ , ﾞ ∧{:i/ ヽ{ ／,.ｨ代ﾆ二~￣~¨㍉XΧＸ +
/ _+ ／ /::;;夊 } ／イ Y ├- Ｘ ‐
_+ ／ r＜ ヽ ／ ,仆＝{ ﾉ ヽ _+Χ
_+ ／ ﾊ ` 、 }i ／/ 八 { / ＼_+x＋
_+ / 丶 ｀`丶､ 八 ／ /__＿」 ヽ / / Χ┼
'´ ＼ `ヽ乞彡' ／ ﾘ ├＼ / / /X＋
/ / ／ ／ ／ ;′ `ー' {-‐ 7x┼×
く ､ 〈 ／ ／-‐～､/ } ,ｲX┼Χ
/ ｜ ` ､ /＼／ ；／/┼Χ＋
｜ ｜ ;ﾟイ┼Χ┼Χ
/ ｜ ｜ ,' |Χ┼Χ┼
｜ ｜ -‐ ''"´ ; |┼Χ┼Χ
http://anime.en.utf8art.com/arc/madoka_magica_710.html
==========
目前发现的小问题
如果你在Code块外面设置字体大小, 像这样：
[size=25]
[code]=== 标题 ===
内容[/ code]
[/size]
那么标题和隐藏按钮的字体会跟着改变.
虽然我觉得不会有人这么做, 因为这么做并不能调整Code块本身的字体大小, 是毫无用处的写法..
教程结束, 感谢阅读!
=========
备注: 代码高亮等以后吧..现在暂时不弄了..况且在这儿分享代码的人也不多..
不过我觉得这类代码块很少出现, 而且保留它也影响不大, 所以就没有删去
如果哪天BBcode支持自定义字体了 那就可以删掉了
但到那时我还要看看具体该怎么改
选择Code也是因为这个样式比较简单 写起来容易一点, 更复杂的我不会
其实我设计标题格式的时候就考虑过这一点
对于没有开组件的人而言, 开头那一排 ====== 或者 !======! 可以单纯当做分隔线装饰
而写成 ===标题=== 或者 !===标题===! 本身就很像标题了
然后..代码块即使不能折叠也能显示, 而且本来别人的电脑上就有可能没有你想显示的字体..启不启用组件都有可能显示不正常
font之类的因为只占了一行, 大概会被当做乱码吧..反正无论是否启用组件能看到这一行, 问题也不大..
当然能默认启用最好 这会显得这个组件很有用
就是不知道sai老板是什么想法..
其实我有想过的但我不知道该怎么做
把
加在 //utility functions之前
这段代码会加载对应的主题和highlightjs的代码，然后渲染语法高亮（但我不确定sai老板会不会同意用这种方式引入依赖。。。）
还可以加一个配置项设置对应的style，但我不太熟悉配置相关的代码，就不改了
效果大概这样
https://wx4.sinaimg.cn/large/bd69bf14ly1g3fooxbkkbj20os0nwtdn.jpg
你给的截图里也是..有些有注释有些没有..(而且为啥注释是绿的? 我这儿默认是灰色斜体..)
是我的用法问题，应该在eval之后加上一句hljs.configure({useBR: true})
（我之前截图的时候用的主题可能跟最后发的不是一个主题
换成/**/也不行..加了class=javascript也不行..套个<code>也不行..时好时坏的..
好像基本就这两个语法高亮库了
是说要把上面的两个链接换成PrismJS里面某个文件的raw么 我不知道该换成哪个..github里没有叫prism.min.js的文件诶
其实我觉得highlightjs的效果已经挺让人满意了
其实我打算让你们在写代码的时候手动在开头标明自己用的语言, 因为自动检测会出错..#6-11就被识别成了cs而不是javascript..
而且标明自己用的语言的话 相当于说明自己确实是在展示代码而不是别的..到时候可以单独给代码块加个code的tag 而不只是pre..
那个地方所有组件都是无效的