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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 4181 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

图片

标签

插入

20 条回复 • 1970-01-01 08:00:00 +08:00

gracece

2013-07-18 19:47:30 +08:00

Images Lazyload and Slideshow

P233

2013-07-18 19:52:48 +08:00

[![]()]()

Moker

2013-07-18 20:48:45 +08:00

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

elvba

2013-07-19 00:13:07 +08:00

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

elvba

2013-07-19 00:16:52 +08:00

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

elvba

2013-07-19 09:46:08 +08:00

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

Moker

2013-07-19 12:51:10 +08:00

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

linlis

2013-07-19 13:30:41 +08:00

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

elvba

2013-07-19 13:36:43 +08:00

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

P233

2013-07-19 13:50:38 +08:00

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

Moker

2013-07-19 15:03:29 +08:00

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

elvba

2013-07-19 16:36:00 +08:00

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

elvba

2013-07-19 16:38:08 +08:00

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

P233

2013-07-19 16:45:04 +08:00

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

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

P233

2013-07-19 17:10:55 +08:00

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

elvba

2013-07-19 18:19:09 +08:00

@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

2013-07-19 18:36:47 +08:00

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

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

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

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

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

P233

2013-07-19 19:02:50 +08:00

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

elvba

2013-07-20 13:01:43 +08:00

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

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

P233

2013-07-20 15:51:34 +08:00

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

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