在wordpress中用markdown插入的图片，如何实现点击图片放大或者在新的标签打开图片原地址？

[elvba]

现在只要插入比较大的图片，会自动缩放变小，鼠标移动上去也不能像用<img>标签那样可以单击打开，用了几个图片插件，要么用不来，要么不方便。

[gracece]

Images Lazyload and Slideshow

[P233]

[![]()]()

[Moker]

lightbox
试下
http://www.lokeshdhakar.com/projects/lightbox2/

[elvba]

@P233 谢谢！原来可以嵌套使用。

[elvba]

@Moker
@gracece
类似的插件都试过，大部分都要手动加标签，我想完全用markdown写文章。
不需要手动加标签的插件也有，但是都没有放大按钮，也许有我自己不会设置。

[elvba]

@P233 在wordpress中用markdown写文章碰到想要高亮的代码怎么办？代码里的某些字符老是被转义。

[Moker]

在lightbox下、、、显示缩略图，点击之后打开大图。。。。

[linlis]

@P233 很犀利，之前我也没这么写过。

[elvba]

@Moker lightbox点击后打开大图加载时间长，而直接点开链接瞬间就能加载完。二是就算点开是大图也有看不清的情况，插件又没有放大按钮，这样还不如点开链接在新页面打开图片。

[P233]

@elvba 我是 Jekyll 用户，通过 pygments 高亮代码效果非常满意，Wordpress 插件搜索到了 http://wordpress.org/plugins/pygments-for-wordpress/

[Moker]

你可以第一次就加载大图。。。lightbox是因为第一次加载的是小图
至于你说先模糊后清晰 貌似跟你PS导出的时候可以设置

[elvba]

@Moker PS导出的时候经过web优化过了的，都在100k以下，一般在60K。这些图片我之前访问过，本地肯定有缓存的，但是启用插件后点开还是要等一会儿，具体什么原因就不清楚了。

[elvba]

@P233 请教下在css中如何设置<pre><code> ... </pre></code>的样式？我想让<code>显示一种样式，<pre><code>显示另一种样式。

[P233]

@elvba 可以直接用 code 给 <pre><code> ... </pre></code> 写样式，然后

p > code, li > code, blockquote > code
给行内单独的 <code></code> 写样式, 甚至 h1 > code, h2 > code 等，不知道还有没有其他办法？

[P233]

@elvba 对了 p > code ，前面最好加个 id 选择器，比如 #content p > code ，提高优先级

[elvba]

@P233 抱歉，这里我写错了，应该是<pre><code> ... </code></pre>。

刚才去看了选择器，好多种，头都晕了……p > code指的是<p><code>这一种情况对吧，所以把<code>可能出现的都列出来。之后再用pre>code或者code，单独设置<pre><code>。这样理解对吗？

为什么code对p>code没影响呢？是因为p>code的优先级比code的原因吗？
markdown解析成html好像不带id。

[P233]

不需要考虑 <pre></pre>

code {} 给所有的 code 标签写样式，优先级等于 1

p > code, li > code, blockquote > code {} 给所有直接出现在 p li blockquote 内的 code 标签写样式，优先级各等于 2

#content p > code {} 优先级等于 102

其实都是给 code 标签写样式，根据 CSS 的优先级 override 而已 :)

[P233]

刚刚看到 @jybox 的方法，反过来写更好，直接给 code 定义样式，然后 pre > code {} 定义 pre 内的样式。我想复杂了，不好意思 :)

[elvba]

@P233
@jybox
谢谢，今天仔细看了css手册才发现是自己表达错了。
用pre code {}和pre > code {}都是定义的code段，而我其实想实现的是pre整块的效果，比如整块代码区域背景是灰色，整块区域加边框。
pre {} li> code{} p > code {}。

之前我一直以为用pre code {} 和pre > code {} 就可以定义<pre><code>整块代码区域。

[P233]

@elvba 楼主你发了这么多感谢，太不好意思了，你的需求我以前写过，今天简单修改了一下。效果请查看我的菜鸟博客，里面也有一些 CSS 基础资料总结: http://peters-playground.com/

CSS code: https://github.com/P233/p233.github.com/blob/master/assets/stylesheets/style.css