WordPress 非插件使用 markdown
2016-03-11 本文已影响338人
晓峰残月
集成后的功能如下:
- 实时预览 即见即所得,甚至你可以作为一个专门的 markdown 编辑器来使用
- 代码高亮 程序员最爱,需要在前台做代码高亮
- 代码分离 markdown 的代码和 html 代码分离,互不影响,并且会将 markdown 代码保存下来,以便下次继续编辑。
集成步骤
- 下载 marked.js 和 makemarkdown.js
- 将下好的两个文件放倒对应主题下面的 js 目录下
marked.js 是一套 js 库,用于将 markdown 代码转换成 html。makemarked.js 用于监听文本框事件,来实时调用 marked.js 来转换 markdown 代码。
- 把下面的代码复制到function.php
// 增加 markdown 功能到后台编辑器
add_action( 'admin_menu', 'create_markdown' );
add_action( 'save_post', 'save_markdown', 10, 2 );
function create_markdown() {
add_meta_box( 'markdown_box', 'Markdown', 'markdown_html', 'post', 'normal', 'high' );
}
function markdown_html( $object, $box ) { ?>
<textarea name="markdown" id="markdown"
cols="60" oninput ="markdownEditorChanged()"
rows="50" style="width: 100%; height:100%">
<?php echo htmlspecialchars (get_post_meta( $object->ID, 'markdown', true )); ?>
</textarea>
<?php }
function save_markdown( $post_id, $post ) {
if ( !current_user_can( 'edit_post', $post_id ) )
return $post_id;
$meta_value = get_post_meta( $post_id, 'markdown', true );
$new_meta_value = $_POST['markdown'];
if ( $new_meta_value && '' == $meta_value )
add_post_meta( $post_id, 'markdown', $new_meta_value, true );
elseif ( $new_meta_value != $meta_value )
update_post_meta( $post_id, 'markdown', $new_meta_value );
elseif ( '' == $new_meta_value && $meta_value )
delete_post_meta( $post_id, 'markdown', $meta_value );
}
function markdown_script() {
wp_enqueue_script('markdown', get_template_directory_uri() . '/js/marked.js' );
wp_enqueue_script('makemarkdown', get_template_directory_uri() . '/js/makemarkdown.js');
}
add_action( 'admin_enqueue_scripts', 'markdown_script');
参考文章: wordpress 深度集成 markdown
---------下面是测试---------
这是Header1
这是Header2
这是Header3
这是Header4
这是Header5
这是Header6
引用 笨鸟先飞 勤定补拙
下面是代码
print("Hello World")