This is an old revision of the document!
WordPress Plugins from OutlyerNet
Caveat emptor
Here I'll place plugins I've written or modified to fit my needs, but I'm not a WordPress hacker, so I might be re-inventing the wheel for built-in functions or pre-existing, much better plugins.If you know that's the case, please contact me :).
I can't say for sure either if I'm inadvertently breaking something or punching security holes into <abbr title=“WordPress”>WP</abbr> although I can't see any such problems in the code I'm publishing.
Code here is published under the GPL license unless specified otherwise.</p>
Interlinks+
No longer needed
This plugin was integrated back into the main Interlinks so it is deprecated.<p><a href=“files/kd-o-interlinks.php”>Download v1.0a+</a> (last update october 13th 2007)</p>
Interlinks+ is based on Interlinks by Harley. The original adds a very nifty feature: it enables wiki-style interlinks (e.g. [[Some article]]
will be converted to a link to the post/page titled "Some article").
There's a feature I missed in Interlinks: Support for piped links; continuing with the above example, [[Some article|That's a nicer title IMHO]]
would link to "Some article" but the link text will be "That's a nicer title IMHO".
Additionally I added a couple extra modifications to generate valid XHTML, and made the link also display the article's title.
Let's compare Interlinks and Interlinks+:
Case 1: Standard interlink |
||
---|---|---|
Example: [[My article]] |
||
Interlinks | Interlinks+ | |
Generated HTML | <a href="http://example.invalid/my-article/">My article</a> | <a href="http://example.invalid/my-article/" title="My article">My article</a> |
Rendered HTML | My article | My article |
Case 2: Interlink with user-supplied text |
||
Example: [[My article|My first article]] |
||
Interlinks | Interlinks+ | |
Generated HTML | <font color='red'>My article</font> | <a href="http://example.invalid/my-article/" title="My article">My first article</a> |
Rendered HTML | | My first article |
Case 3: Broken link |
||
Example: [[Broken]] (where “Broken” doesn't exist) |
||
Interlinks | Interlinks+ | |
Generated HTML | <font color='red'>Broken</font> | <span style="color:red;">Broken</span> |
Rendered HTML | Broken broken link | Broken broken link |
Relative URLs
<p><a href=“files/net_outlyer_wp-relativeurls.php”>Download v1.5</a> (last update october 14th 2007)</p>
Relative URLs is mainly targeted at people with a local copy of their WordPress site and those that reorganise and/or change their pages hierarchy often although many standard installations can also take advantage of it.
Relative URLs can be seen as kind of complementary to Interlinks: It creates a valid URL or link from a relative path.
If you want to link to a post Interlinks or Interlinks+ are better alternatives, but if you want to link to a given file in your site neither will help you.
I guess so far it isn't clear what's the need for such a plugin, so let's clarify a bit, note that:
- Pages can be accessed from more than one URL (I'm assuming your WordPress installation is in a subdirectory and URL redirection is being used):
- http://example.com/parentpage/page/
- http://example.com/wordpress/parentpage/page/
- http://example.com/wordpress/?page_id=2
- Using an absolute URL to refer to stuff in the site has the potential of being broken if you
- Change WordPress' path, e.g.: http://example.com/wordpress/ is moved to http://example.com/ or http://example.com/blog/.
- Change your (sub)domain, e.g. http://example.com/ becomes http://blog.example.com/.
- Using a relative URL to refer to stuff in the site has the potential of being broken if you (or visitors)
- Access from a different URL, e.g.: A relative URL like images/im.jpg will point to different things when accessed from http://example.com/parentpage/page (http://example.com/parentpage/page/images/im.jpg) and http://example.com/wordpress/?page_id=2 (http://example.com/wordpress/images/im.jpg).
Finally, if you use a local copy of WordPress to test stuff, chances are your local copy would have quite a different URL, e.g. http://localhost/~username/wordpress/ and you might want your URLs to point to the local copy and not the on-line site.</p>
Usage
Enclose your local URL in double braces (e.g. {{myrelative/url}}
), to get a full URL generated dynamically, e.g. to http://example.com/wordpress/myrelative/url.
Enclose your local URL in double braces along a text description (separated by a space) to get a dynamically generated link to the full URL.
{{the_url/file.txt The text file}}
would become
<a href="http://example.com/wordpress/the_url/file.txt">The text file</a>.
Note you'll have to encode any spaces in the url (e.g. to link to “the file”; you'll have to encode the space (replace it with %20
)
i.e.: {{the%20file}}
.
Escaping Relative URLs
If you want to write literal double curly brackets ({{'') then you'll have to use an //html entity// such as <html><samp></html>''{''<html></samp></html> and
<html><samp></html>''}''<html></samp></html> (or <html><samp></html>''{''<html></samp></html> and <html><samp></html>''}''<html></samp></html>).
For maximum security use at least one on each end, e.g.
<html><samp></html>''{{\_whatever\_}}''<html></samp></html> will be parsed correctly as
<html><samp></html>''{{\_whatever\_}}''<html></samp></html>.
\\
BUT beware of the visual editor in WordPress (although if you use it you're
probably used to fight it ;).
===== JS Base2 =====
<alert type="warning" icon="fa fa-warning">This section isn't finished</alert>
<p><a href="files/js-base2-1.0+0.9a.tar.gz">Download v1.0+0.9a</a> (last update october 24th 2007). (Note <var>1.0</var> is the plugin version and <var>0.9a</var> is the base2's version used in the plugin).</p>
A completely trivial plugin that loads [[http://dean.edwards.name|Dean Edwards]] **base2** JavaScript library (see [[http://dean.edwards.name/weblog/2007/03/yet-another|[1]]] and [[http://code.google.com/p/base2/| [2]]]).
This library is mostly a cross-browser fix of the <html><abbr title="Document Object Model">DOM</abbr></html> plus a selectors API implementation (allowing selection from JavaScript with CSS selectors).
<label type="info">Note</label> It is used by the following plugin :)
===== JS Syntax Highlighter =====
<p><a href="files/js-syntax-highlighter-0.2.tar.gz">Download v0.2</a> (last update october 25th 2007).</p>
<p>This plugin loads <a href="http://code.google.com/p/syntaxhighlighter/">Alex Gorbatchev's</a> <strong>SyntaxHighlighter</strong> JavaScript script. With a twist :)</p>
<p>SyntaxHighlighter is a script that will highlight code from JavaScript when marked appropriately, hence allowing you to post raw code that will be automagically prettyprinted on load.
<br />
I needed a couple workarounds to use it on my site and they were the motivation for this plugin:
</p>
<dl>
<dt>First problem: Code must be enclosed in either a <code><pre></code>
or a <code><textarea></code> tag, with their <code>name</code>
attribute set to certain (user-selectable) value.
<br />
The problem is, <code><pre></code> has no <code>name</code> attribute so
the page wouldn't validate.</dt>
<dd style="margin-bottom:1em"><strong>My solution:</strong> (Note I opted to not modify SyntaxHighlighter
code) Mark code with a class and then, on-the-fly, add the name attribute from
JavaScript (this makes the HTML validate as the invalid attribute is only
created in-memory).</dd>
<dt>Second problem: Each supported language has its own associated JavaScript
file which you should load when writing code for a that language. I felt
loading them site-wide was was overkill (and I don't know which languages I
might need), while loading them as needed, in the article body felt cumbersome.</dt>
<dd><strong>My solution:</strong> Load the common script, see if any languages are
needed and load them dinamically. As a side effect the page will load faster
(the required languages are loaded after the page ended loading).</dd>
</dl>
<p>So <strong>in short</strong> this plugin loads SyntaxHighlighter allowing your
pages to validate and only loading language files as needed.</p>
<p>I also changed the CSS file a bit to use fonts I consider look better
and added colours to <var>functions</var> and <var>variables</var>.</p>
<h3 id="jsh-usage">Usage</h3>
<p>Plugin installation:</p>
<ol>
<li>Decompress in the <code>wp-content/plugins</code> folder, it will create
its own folder.</li>
<li>Activate it from <abbr title="WordPress">WP</abbr>'s admin panel.</li>
</ol>
<p>Syntax highlighting:</p>
<ol>
<li>Wrap your code in a <pre> or <textarea> with class '<code>syntax-highlight</code>' and
the appropriate class for the language of the block, e.g. '<code>cpp</code>' for C++ (see
<a href="http://code.google.com/p/syntaxhighlighter/wiki/Languages">the full list</a>).</li>
<li>There's no step 2 :P But remember the highlighting takes place a bit after loading the page.</li>
</ol>
<h4 id="jsh-no-base2">Usage without <em>base2</em></h4>
<p>I dropped support for such a situation. You can try with an older version of
loader.js but keep in mind that then languages <strong>won't be
autoloaded</strong>.</p>
<h3 id="jsh-caveats">Caveats of the current version</h3>
<h4 id="jsh-passing-options">Passing options for a single block</h4>
<p>Passing options for a block to SyntaxHighlighter needs a workaround as
my loader won't detect the language then, the workaround is to use a hidden,
empty block without options, i.e:<br />
If you want to have something like</p>
<!-- Ensure correct loading of language file -->
<div style="display:none !important;"><pre class="syntax-highlight html javascript"></pre></div>
<pre class="html:nogutter syntax-highlight">
<pre class="syntax-highlight javascript:firstline[10]">
function doSomething() {
}
</pre>
</pre>
<p>Then you'll need to add a hidden block with the language class(es) needed.
That block can have the classes of all needed languages:</p>
<pre class="html:nogutter:firstline[5] syntax-highlight">
<!-- Hidden, meaningless, code block -->
<div style="display:none !important;">
<pre class="syntax-highlight html cpp"></pre>
</div>
</pre>
<h4 id="jsh-disabled-aliases">Disabled language aliases</h4>
<p>Due to the way the code is written the following language name aliases won't
be looked for (all of them have alternatives): <code>c++</code>, <code>c#</code>,
<code>vb.net</code>.</p>
<p>They could be enabled with some escaping but I didn't feel the need :p</p>
<h3 id="jsh-config">Customisation</h3>
<p>There're a couple things you might want to tweak, to change them edit the file <code>loader.js</code>
(note that the version actually loaded in the browser is the one in the <code>js/</code> directory,
but it is shipped packed with <a href="http://dean.edwards.name/packer/">Dean Edwards' packer</a>,
which makes it quite harder to edit. I suggest you to edit the version in the <code>full-js/</code>
directory and once you're happy with it pack it again.</p>
<script type="text/javascript" src="http://outlyer.net/site/wp-content/plugins/js-base2/base2-dom-fp.js"></script>
<script type="text/javascript" src="http://outlyer.net/site/wp-content/plugins/js-syntax-highlighter/js/shCore.js"></script>
<script type="text/javascript" src="http://outlyer.net/site/wp-content/plugins/js-syntax-highlighter/js/loader.js"></script>
<script type="text/javascript">
dpLoader.init('http://outlyer.net/site/wp-content/plugins/js-syntax-highlighter');
</script>
<pre class="syntax-highlight javascript:firstline[19]">
bloggerMode: false, // Set to true if the blogging software adds <br />'s
// See: <http://code.google.com/p/syntaxhighlighter/wiki/BloggerMode>
opts: [ // Options for HighlightAll, see <http://code.google.com/p/syntaxhighlighter/wiki/HighlightAll>
true, // Show Gutter
false, // Show Controls (!*not default*)
false, // Collapse all
1, // First line
false // Show columns
],
WAIT_TO_LOAD: 200, // (ms) Period to wait between checks for language loading
FAIL_TIMEOUT: 120000, // (ms) After this period will stop trying to load languages
</pre>
<p>These are the meaningful variables, I think they're self explanatory enough,
a note of warning though: if some of the languages fails loading you'll have to
wait for <code>FAIL_TIMEOUT</code> milliseconds before syntax highlighting gets
enabled. Set it too low, though, and you'll get bogus failures.</p>
<!-- End of JS Syntax Highlighter -->
<hr style="margin-top:1em;" />
<footer>
<div class="footer">
<address>© 2007 <span id="email">Toni Corvera <outlyer at gmail dot com></span>
<br />
<span class="tiny">[<a href="http://outlyer.net./pubkey.asc">GPG Key</a>]</span></address>
<br />
<aside><address>
Other than by e-mail, you can leave your comments about any of these plugins in the
<a href="http://outlyer.net/codigo/wordpress/" hreflang="es">WordPress code</a> page in my site.
</address></aside>