248 lines
65 KiB
HTML
248 lines
65 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Image | Markwon</title>
|
|
<meta name="description" content="Android markdown library based on commonmark specification that renders markdown as system-native Spannables (no WebView)">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/Markwon/apple-touch-icon.png?v=1">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/Markwon/favicon-16x16.png?v=1">
|
|
<link rel="icon" href="/Markwon/favicon.ico?v=1">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/Markwon/favicon-32x32.png?v=1">
|
|
<link rel="manifest" href="/Markwon/manifest.json?v=1">
|
|
<meta name="keywords" content="android,markdown,library,spannable,markwon,commonmark">
|
|
|
|
<link rel="preload" href="/Markwon/assets/css/0.styles.3fbbce9e.css" as="style"><link rel="preload" href="/Markwon/assets/js/app.bdfd2bc6.js" as="script"><link rel="preload" href="/Markwon/assets/js/75.1d59d27c.js" as="script"><link rel="preload" href="/Markwon/assets/js/3.eaac0903.js" as="script"><link rel="preload" href="/Markwon/assets/js/16.076204be.js" as="script"><link rel="prefetch" href="/Markwon/assets/js/42.d7ca0851.js"><link rel="prefetch" href="/Markwon/assets/js/2.81714ae9.js"><link rel="prefetch" href="/Markwon/assets/js/4.31fa5321.js"><link rel="prefetch" href="/Markwon/assets/js/5.6234b6a3.js"><link rel="prefetch" href="/Markwon/assets/js/6.ef59e46d.js"><link rel="prefetch" href="/Markwon/assets/js/7.e9b37c71.js"><link rel="prefetch" href="/Markwon/assets/js/8.9dff76ac.js"><link rel="prefetch" href="/Markwon/assets/js/9.7d018a47.js"><link rel="prefetch" href="/Markwon/assets/js/10.99fc608c.js"><link rel="prefetch" href="/Markwon/assets/js/11.cdc173e9.js"><link rel="prefetch" href="/Markwon/assets/js/12.98308542.js"><link rel="prefetch" href="/Markwon/assets/js/13.83b81b01.js"><link rel="prefetch" href="/Markwon/assets/js/14.0e5fe31e.js"><link rel="prefetch" href="/Markwon/assets/js/15.724f3dc4.js"><link rel="prefetch" href="/Markwon/assets/js/17.9412daf3.js"><link rel="prefetch" href="/Markwon/assets/js/18.187f0167.js"><link rel="prefetch" href="/Markwon/assets/js/19.af3507a7.js"><link rel="prefetch" href="/Markwon/assets/js/20.dc11e22f.js"><link rel="prefetch" href="/Markwon/assets/js/21.393a507f.js"><link rel="prefetch" href="/Markwon/assets/js/22.a6ac92c5.js"><link rel="prefetch" href="/Markwon/assets/js/23.9edcc0b3.js"><link rel="prefetch" href="/Markwon/assets/js/24.073942b3.js"><link rel="prefetch" href="/Markwon/assets/js/25.507307eb.js"><link rel="prefetch" href="/Markwon/assets/js/26.87c7e366.js"><link rel="prefetch" href="/Markwon/assets/js/27.a6f7a96f.js"><link rel="prefetch" href="/Markwon/assets/js/28.c0caacb4.js"><link rel="prefetch" href="/Markwon/assets/js/29.230c7321.js"><link rel="prefetch" href="/Markwon/assets/js/30.45e92827.js"><link rel="prefetch" href="/Markwon/assets/js/31.3a2ff699.js"><link rel="prefetch" href="/Markwon/assets/js/32.662e2ab9.js"><link rel="prefetch" href="/Markwon/assets/js/33.d83b2cb7.js"><link rel="prefetch" href="/Markwon/assets/js/34.4b19ef85.js"><link rel="prefetch" href="/Markwon/assets/js/35.1684da38.js"><link rel="prefetch" href="/Markwon/assets/js/36.9852715d.js"><link rel="prefetch" href="/Markwon/assets/js/37.e98b3352.js"><link rel="prefetch" href="/Markwon/assets/js/38.09771599.js"><link rel="prefetch" href="/Markwon/assets/js/39.37003a65.js"><link rel="prefetch" href="/Markwon/assets/js/40.bf595a01.js"><link rel="prefetch" href="/Markwon/assets/js/41.db50f781.js"><link rel="prefetch" href="/Markwon/assets/js/43.78500964.js"><link rel="prefetch" href="/Markwon/assets/js/44.60fec7f9.js"><link rel="prefetch" href="/Markwon/assets/js/45.78224b99.js"><link rel="prefetch" href="/Markwon/assets/js/46.9a7f306b.js"><link rel="prefetch" href="/Markwon/assets/js/47.42b56911.js"><link rel="prefetch" href="/Markwon/assets/js/48.cceb75d4.js"><link rel="prefetch" href="/Markwon/assets/js/49.20507df8.js"><link rel="prefetch" href="/Markwon/assets/js/50.f89d88b1.js"><link rel="prefetch" href="/Markwon/assets/js/51.d7ac54ce.js"><link rel="prefetch" href="/Markwon/assets/js/52.394ded4e.js"><link rel="prefetch" href="/Markwon/assets/js/53.144cf408.js"><link rel="prefetch" href="/Markwon/assets/js/54.0f936c4f.js"><link rel="prefetch" href="/Markwon/assets/js/55.5b7382a9.js"><link rel="prefetch" href="/Markwon/assets/js/56.1cf2f788.js"><link rel="prefetch" href="/Markwon/assets/js/57.1b7dddc1.js"><link rel="prefetch" href="/Markwon/assets/js/58.5271aaaf.js"><link rel="prefetch" href="/Markwon/assets/js/59.7ef6ac9a.js"><link rel="prefetch" href="/Markwon/assets/js/60.9bbfa80f.js"><link rel="prefetch" href="/Markwon/assets/js/61.628c1500.js"><link rel="prefetch" href="/Markwon/assets/js/62.d4d206d7.js"><link rel="prefetch" href="/Markwon/assets/js/63.8ccf8bfc.js"><link rel="prefetch" href="/Markwon/assets/js/64.7672a52b.js"><link rel="prefetch" href="/Markwon/assets/js/65.c4f000dc.js"><link rel="prefetch" href="/Markwon/assets/js/66.4a29728a.js"><link rel="prefetch" href="/Markwon/assets/js/67.7331c7c7.js"><link rel="prefetch" href="/Markwon/assets/js/68.9d1d2ae1.js"><link rel="prefetch" href="/Markwon/assets/js/69.fd31295a.js"><link rel="prefetch" href="/Markwon/assets/js/70.fac8f892.js"><link rel="prefetch" href="/Markwon/assets/js/71.c3fcfb65.js"><link rel="prefetch" href="/Markwon/assets/js/72.d2389fc9.js"><link rel="prefetch" href="/Markwon/assets/js/73.6ce21170.js"><link rel="prefetch" href="/Markwon/assets/js/74.2ad91074.js"><link rel="prefetch" href="/Markwon/assets/js/76.f3844391.js"><link rel="prefetch" href="/Markwon/assets/js/77.4e5a82c3.js"><link rel="prefetch" href="/Markwon/assets/js/78.ff7203ee.js"><link rel="prefetch" href="/Markwon/assets/js/79.b1718a0d.js"><link rel="prefetch" href="/Markwon/assets/js/80.802db0eb.js"><link rel="prefetch" href="/Markwon/assets/js/81.9edd3cd9.js"><link rel="prefetch" href="/Markwon/assets/js/82.52f04a34.js"><link rel="prefetch" href="/Markwon/assets/js/83.3bd397c0.js"><link rel="prefetch" href="/Markwon/assets/js/84.a9af8a34.js"><link rel="prefetch" href="/Markwon/assets/js/85.2a0d8d40.js">
|
|
<link rel="stylesheet" href="/Markwon/assets/css/0.styles.3fbbce9e.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/Markwon/" class="home-link router-link-active"><!----> <span class="site-name">Markwon</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/Markwon/docs/v4/install.html" class="nav-link">Install</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">API Version</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>Latest</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/Markwon/" class="nav-link">4.x.x</a></li></ul></li><li class="dropdown-item"><h4>Legacy</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/Markwon/docs/v3/install.html" class="nav-link">3.x.x</a></li><li class="dropdown-subitem"><a href="/Markwon/docs/v2/" class="nav-link">2.x.x</a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://github.com/noties/Markwon/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Changelog
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/noties/Markwon" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Github
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/Markwon/docs/v4/install.html" class="nav-link">Install</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">API Version</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>Latest</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/Markwon/" class="nav-link">4.x.x</a></li></ul></li><li class="dropdown-item"><h4>Legacy</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/Markwon/docs/v3/install.html" class="nav-link">3.x.x</a></li><li class="dropdown-subitem"><a href="/Markwon/docs/v2/" class="nav-link">2.x.x</a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://github.com/noties/Markwon/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Changelog
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/noties/Markwon" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Github
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/Markwon/" class="sidebar-link">Introduction</a></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Core</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/Markwon/docs/v4/core/getting-started.html" class="sidebar-link">Getting started</a></li><li><a href="/Markwon/docs/v4/core/plugins.html" class="sidebar-link">Plugins</a></li><li><a href="/Markwon/docs/v4/core/registry.html" class="sidebar-link">Registry</a></li><li><a href="/Markwon/docs/v4/core/theme.html" class="sidebar-link">Theme</a></li><li><a href="/Markwon/docs/v4/core/configuration.html" class="sidebar-link">Configuration</a></li><li><a href="/Markwon/docs/v4/core/visitor.html" class="sidebar-link">Visitor</a></li><li><a href="/Markwon/docs/v4/core/spans-factory.html" class="sidebar-link">Spans Factory</a></li><li><a href="/Markwon/docs/v4/core/core-plugin.html" class="sidebar-link">Core plugin</a></li><li><a href="/Markwon/docs/v4/core/movement-method-plugin.html" class="sidebar-link">Movement method plugin</a></li><li><a href="/Markwon/docs/v4/core/render-props.html" class="sidebar-link">RenderProps</a></li><li><a href="/Markwon/docs/v4/core/text-setter.html" class="sidebar-link">TextSetter</a></li></ul></div></li><li><a href="/Markwon/docs/v4/editor/" class="sidebar-link">Editor</a></li><li><a href="/Markwon/docs/v4/ext-latex/" class="sidebar-link">LaTeX extension</a></li><li><a href="/Markwon/docs/v4/ext-strikethrough/" class="sidebar-link">Strikethrough extension</a></li><li><a href="/Markwon/docs/v4/ext-tables/" class="sidebar-link">Tables extension</a></li><li><a href="/Markwon/docs/v4/ext-tasklist/" class="sidebar-link">Task list extension</a></li><li><a href="/Markwon/docs/v4/html/" class="sidebar-link">HTML</a></li><li><a href="/Markwon/docs/v4/image/" class="active sidebar-link">Image</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Markwon/docs/v4/image/#schemehandler" class="sidebar-link">SchemeHandler</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Markwon/docs/v4/image/#fileschemehandler" class="sidebar-link">FileSchemeHandler</a></li><li class="sidebar-sub-header"><a href="/Markwon/docs/v4/image/#dataurischemehandler" class="sidebar-link">DataUriSchemeHandler</a></li><li class="sidebar-sub-header"><a href="/Markwon/docs/v4/image/#networkschemehandler" class="sidebar-link">NetworkSchemeHandler</a></li><li class="sidebar-sub-header"><a href="/Markwon/docs/v4/image/#okhttpnetworkschemehandler" class="sidebar-link">OkHttpNetworkSchemeHandler</a></li><li class="sidebar-sub-header"><a href="/Markwon/docs/v4/image/#custom-schemehandler" class="sidebar-link">Custom SchemeHandler</a></li></ul></li><li class="sidebar-sub-header"><a href="/Markwon/docs/v4/image/#mediadecoder" class="sidebar-link">MediaDecoder</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Markwon/docs/v4/image/#gifmediadecoder" class="sidebar-link">GifMediaDecoder</a></li><li class="sidebar-sub-header"><a href="/Markwon/docs/v4/image/#svgmediadecoder" class="sidebar-link">SvgMediaDecoder</a></li><li class="sidebar-sub-header"><a href="/Markwon/docs/v4/image/#defaultmediadecoder" class="sidebar-link">DefaultMediaDecoder</a></li></ul></li><li class="sidebar-sub-header"><a href="/Markwon/docs/v4/image/#asyncdrawablescheduler" class="sidebar-link">AsyncDrawableScheduler</a></li><li class="sidebar-sub-header"><a href="/Markwon/docs/v4/image/#errorhandler" class="sidebar-link">ErrorHandler</a></li><li class="sidebar-sub-header"><a href="/Markwon/docs/v4/image/#placeholderprovider" class="sidebar-link">PlaceholderProvider</a></li></ul></li><li><a href="/Markwon/docs/v4/image-coil/" class="sidebar-link">Image Coil</a></li><li><a href="/Markwon/docs/v4/image-glide/" class="sidebar-link">Image Glide</a></li><li><a href="/Markwon/docs/v4/image-picasso/" class="sidebar-link">Image Picasso</a></li><li><a href="/Markwon/docs/v4/inline-parser/" class="sidebar-link">Inline Parser</a></li><li><a href="/Markwon/docs/v4/linkify/" class="sidebar-link">Linkify</a></li><li><a href="/Markwon/docs/v4/recycler/" class="sidebar-link">Recycler</a></li><li><a href="/Markwon/docs/v4/recycler-table/" class="sidebar-link">Recycler Table</a></li><li><a href="/Markwon/docs/v4/simple-ext/" class="sidebar-link">Simple Extension</a></li><li><a href="/Markwon/docs/v4/syntax-highlight/" class="sidebar-link">Syntax highlight</a></li><li><a href="/Markwon/docs/v4/recipes.html" class="sidebar-link">Recipes</a></li></ul> </div> <div class="page"> <div class="content"><h1 id="image"><a href="#image" aria-hidden="true" class="header-anchor">#</a> Image</h1> <a href="http://search.maven.org/#search|ga|1|g%3A%22io.noties.markwon%22%20AND%20a%3A%22image%22"><img src="https://img.shields.io/maven-central/v/io.noties.markwon/image.svg?label=image" alt="image"></a> <p>In order to display images in your markdown <code>ImagesPlugin</code> can be used.</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">final</span> Markwon markwon <span class="token operator">=</span> Markwon<span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">usePlugin</span><span class="token punctuation">(</span>ImagesPlugin<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p> <p>There are also modules that add image loading capabilities to markdown
|
|
based on image-loading libraries: <a href="/Markwon/docs/v4/image-glide/">image-glide</a> and
|
|
<a href="/Markwon/docs/v4/image-picasso/">image-picasso</a></p></div> <p><code>ImagesPlugin</code> splits the image-loading into 2 parts: scheme-handling and media-decoding.</p> <h2 id="schemehandler"><a href="#schemehandler" aria-hidden="true" class="header-anchor">#</a> SchemeHandler</h2> <p>To add a scheme-handler to <code>ImagesPlugin</code>:</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">final</span> Markwon markwon <span class="token operator">=</span> Markwon<span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">usePlugin</span><span class="token punctuation">(</span>ImagesPlugin<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">usePlugin</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">AbstractMarkwonPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">configure</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> Registry registry<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
registry<span class="token punctuation">.</span><span class="token function">require</span><span class="token punctuation">(</span>ImagesPlugin<span class="token punctuation">.</span><span class="token keyword">class</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Action</span><span class="token generics function"><span class="token punctuation"><</span>ImagesPlugin<span class="token punctuation">></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">apply</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> ImagesPlugin imagesPlugin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
imagesPlugin<span class="token punctuation">.</span><span class="token function">addSchemeHandler</span><span class="token punctuation">(</span>DataUriSchemeHandler<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">final</span> Markwon markwon <span class="token operator">=</span> Markwon<span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">usePlugin</span><span class="token punctuation">(</span>ImagesPlugin<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">ImagesPlugin<span class="token punctuation">.</span>ImagesConfigure</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">configureImages</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> ImagesPlugin plugin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
plugin<span class="token punctuation">.</span><span class="token function">addSchemeHandler</span><span class="token punctuation">(</span>DataUriSchemeHandler<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p><code>ImagesPlugin</code> comes with a set of predefined scheme-handlers:</p> <ul><li><code>FileSchemeHandler</code> - <code>file://</code></li> <li><code>DataUriSchemeHandler</code> - <code>data:</code></li> <li><code>NetworkSchemeHandler</code> - <code>http</code>, <code>https</code></li> <li><code>OkHttpNetworkSchemeHandler</code> - <code>http</code>, <code>https</code></li></ul> <h3 id="fileschemehandler"><a href="#fileschemehandler" aria-hidden="true" class="header-anchor">#</a> FileSchemeHandler</h3> <p>Loads images via <code>file://</code> scheme. Allows loading images from <code>assets</code> folder.</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token comment">// default implementation, no assets handling</span>
|
|
FileSchemeHandler<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// assets loading</span>
|
|
FileSchemeHandler<span class="token punctuation">.</span><span class="token function">createWithAssets</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p> <p>Assets loading will work when your URL will include <code>android_asset</code> in the path,
|
|
for example: <code>file:///android_asset/image.png</code> (mind the 3 slashes <code>///</code>). If you wish
|
|
to <em>assume</em> all images without proper scheme to point to assets folder, then you can use
|
|
<a href="/Markwon/docs/v4/core/configuration.html#urlprocessorandroidassets">UrlProcessorAndroidAssets</a></p></div> <p>By default <code>ImagesPlugin</code> includes <em>plain</em> <code>FileSchemeHandler</code> (without assets support),
|
|
so if you wish to change that you can explicitly specify it:</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">final</span> Markwon markwon <span class="token operator">=</span> Markwon<span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">usePlugin</span><span class="token punctuation">(</span>ImagesPlugin<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">ImagesPlugin<span class="token punctuation">.</span>ImagesConfigure</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">configureImages</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> ImagesPlugin plugin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
plugin<span class="token punctuation">.</span><span class="token function">addSchemeHandler</span><span class="token punctuation">(</span>FileSchemeHandler<span class="token punctuation">.</span><span class="token function">createWithAssets</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="dataurischemehandler"><a href="#dataurischemehandler" aria-hidden="true" class="header-anchor">#</a> DataUriSchemeHandler</h3> <p><code>DataUriSchemeHandler</code> allows <em>inlining</em> images with <code>data:</code> scheme (<code>data:image/svg+xml;base64,MTIz</code>).
|
|
This scheme-handler is registered by default, so you do not need to add it explicitly.</p> <h3 id="networkschemehandler"><a href="#networkschemehandler" aria-hidden="true" class="header-anchor">#</a> NetworkSchemeHandler</h3> <p><code>NetworkSchemeHandler</code> allows obtaining images from <code>http://</code> and <code>https://</code> uris
|
|
(internally it uses <code>HttpURLConnection</code>). This scheme-handler is registered by default</p> <h3 id="okhttpnetworkschemehandler"><a href="#okhttpnetworkschemehandler" aria-hidden="true" class="header-anchor">#</a> OkHttpNetworkSchemeHandler</h3> <p><code>OkHttpNetworkSchemeHandler</code> allows obtaining images from <code>http://</code> and <code>https://</code> uris
|
|
via <a href="https://github.com/square/okhttp" target="_blank" rel="noopener noreferrer">okhttp library<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>. Please note that in order to use
|
|
this scheme-handler you must explicitly add <code>okhttp</code> library to your project.</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token comment">// default instance</span>
|
|
OkHttpNetworkSchemeHandler<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// specify OkHttpClient to use</span>
|
|
OkHttpNetworkSchemeHandler<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">OkHttpClient</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// @since 4.0.0</span>
|
|
OkHttpNetworkSchemeHandler<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>Call<span class="token punctuation">.</span>Factory<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="custom-schemehandler"><a href="#custom-schemehandler" aria-hidden="true" class="header-anchor">#</a> Custom SchemeHandler</h3> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">public</span> <span class="token keyword">abstract</span> <span class="token keyword">class</span> <span class="token class-name">SchemeHandler</span> <span class="token punctuation">{</span>
|
|
|
|
<span class="token annotation punctuation">@NonNull</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">abstract</span> ImageItem <span class="token function">handle</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> String raw<span class="token punctuation">,</span> <span class="token annotation punctuation">@NonNull</span> Uri uri<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token annotation punctuation">@NonNull</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">abstract</span> Collection<span class="token generics function"><span class="token punctuation"><</span>String<span class="token punctuation">></span></span> <span class="token function">supportedSchemes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p>Starting with <span class="badge tip top" data-v-099ab69c>4.0.0</span> <code>SchemeHandler</code> can return a result (when no
|
|
further decoding is required):</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">final</span> Markwon markwon <span class="token operator">=</span> Markwon<span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">usePlugin</span><span class="token punctuation">(</span>ImagesPlugin<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">ImagesPlugin<span class="token punctuation">.</span>ImagesConfigure</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">configureImages</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> ImagesPlugin plugin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// for example to return a drawable resource</span>
|
|
plugin<span class="token punctuation">.</span><span class="token function">addSchemeHandler</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">SchemeHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@NonNull</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> ImageItem <span class="token function">handle</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> String raw<span class="token punctuation">,</span> <span class="token annotation punctuation">@NonNull</span> Uri uri<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
|
|
<span class="token comment">// will handle URLs like `drawable://ic_account_24dp_white`</span>
|
|
<span class="token keyword">final</span> <span class="token keyword">int</span> resourceId <span class="token operator">=</span> context<span class="token punctuation">.</span><span class="token function">getResources</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getIdentifier</span><span class="token punctuation">(</span>
|
|
raw<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token string">"drawable://"</span><span class="token punctuation">.</span><span class="token function">length</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token string">"drawable"</span><span class="token punctuation">,</span>
|
|
context<span class="token punctuation">.</span><span class="token function">getPackageName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// it's fine if it throws, async-image-loader will catch exception</span>
|
|
<span class="token keyword">final</span> Drawable drawable <span class="token operator">=</span> context<span class="token punctuation">.</span><span class="token function">getDrawable</span><span class="token punctuation">(</span>resourceId<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">return</span> ImageItem<span class="token punctuation">.</span><span class="token function">withResult</span><span class="token punctuation">(</span>drawable<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token annotation punctuation">@NonNull</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> Collection<span class="token generics function"><span class="token punctuation"><</span>String<span class="token punctuation">></span></span> <span class="token function">supportedSchemes</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> Collections<span class="token punctuation">.</span><span class="token function">singleton</span><span class="token punctuation">(</span><span class="token string">"drawable"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Otherwise <code>SchemeHandler</code> must return an <code>InputStream</code> with proper <code>content-type</code> information
|
|
for further processing by a <code>MediaDecoder</code>:</p> <div class="language-java extra-class"><pre class="language-java"><code>imagesPlugin<span class="token punctuation">.</span><span class="token function">addSchemeHandler</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">SchemeHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@NonNull</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> ImageItem <span class="token function">handle</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> String raw<span class="token punctuation">,</span> <span class="token annotation punctuation">@NonNull</span> Uri uri<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> ImageItem<span class="token punctuation">.</span><span class="token function">withDecodingNeeded</span><span class="token punctuation">(</span><span class="token string">"image/png"</span><span class="token punctuation">,</span> <span class="token function">load</span><span class="token punctuation">(</span>raw<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token annotation punctuation">@NonNull</span>
|
|
<span class="token keyword">private</span> InputStream <span class="token function">load</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> String raw<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h2 id="mediadecoder"><a href="#mediadecoder" aria-hidden="true" class="header-anchor">#</a> MediaDecoder</h2> <p><code>ImagesPlugin</code> comes with predefined media-decoders:</p> <ul><li><code>GifMediaDecoder</code> adds support for GIF</li> <li><code>SvgMediaDecoder</code> adds support for SVG</li> <li><code>DefaultMediaDecoder</code></li></ul> <div class="warning custom-block"><p class="custom-block-title">WARNING</p> <p>If you wish to add support for <strong>SVG</strong> or <strong>GIF</strong> you must explicitly add these dependencies
|
|
to your project:</p> <ul><li>to support <code>SVG</code>: <a href="https://github.com/BigBadaboom/androidsvg" target="_blank" rel="noopener noreferrer">com.caverock:androidsvg<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>to support <code>GIF</code>: <a href="https://github.com/koral--/android-gif-drawable" target="_blank" rel="noopener noreferrer">pl.droidsonroids.gif:android-gif-drawable<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <p>For <a href="https://github.com/noties/Markwon/issues/186" target="_blank" rel="noopener noreferrer">security reasons<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> it's advisable to use latest
|
|
versions of these libraries. If you notice compilation and/or runtime issues when used with Markwon,
|
|
please <a href="https://github.com/noties/Markwon/issues/new" target="_blank" rel="noopener noreferrer">create an issue<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> specifying library and library version used.</p></div> <h3 id="gifmediadecoder"><a href="#gifmediadecoder" aria-hidden="true" class="header-anchor">#</a> GifMediaDecoder</h3> <p>Adds support for GIF media in markdown. If <code>pl.droidsonroids.gif:android-gif-drawable:*</code> dependency
|
|
is found in the classpath, then registration will happen automatically.</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">final</span> Markwon markwon <span class="token operator">=</span> Markwon<span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">usePlugin</span><span class="token punctuation">(</span>ImagesPlugin<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">ImagesPlugin<span class="token punctuation">.</span>ImagesConfigure</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">configureImages</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> ImagesPlugin plugin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// autoplayGif controls if GIF should be automatically started</span>
|
|
plugin<span class="token punctuation">.</span><span class="token function">addMediaDecoder</span><span class="token punctuation">(</span>GifMediaDecoder<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token comment">/*autoplayGif*/</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="svgmediadecoder"><a href="#svgmediadecoder" aria-hidden="true" class="header-anchor">#</a> SvgMediaDecoder</h3> <p>Adds support for SVG media in markdown. If <code>com.caverock:androidsvg:*</code> dependency is found
|
|
in the classpath, then registration will happen automatically.</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">final</span> Markwon markwon <span class="token operator">=</span> Markwon<span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">usePlugin</span><span class="token punctuation">(</span>ImagesPlugin<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">ImagesPlugin<span class="token punctuation">.</span>ImagesConfigure</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">configureImages</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> ImagesPlugin plugin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
|
|
<span class="token comment">// uses supplied Resources</span>
|
|
plugin<span class="token punctuation">.</span><span class="token function">addMediaDecoder</span><span class="token punctuation">(</span>SvgMediaDecoder<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span><span class="token function">getResources</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// uses Resources.getSystem()</span>
|
|
plugin<span class="token punctuation">.</span><span class="token function">addMediaDecoder</span><span class="token punctuation">(</span>SvgMediaDecoder<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="defaultmediadecoder"><a href="#defaultmediadecoder" aria-hidden="true" class="header-anchor">#</a> DefaultMediaDecoder</h3> <p><code>DefaultMediaDecoder</code> <em>tries</em> to decode supplied InputStream
|
|
as Bitmap (via <code>BitmapFactory.decodeStream(inputStream)</code>). This decoder is registered automatically.</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">final</span> Markwon markwon <span class="token operator">=</span> Markwon<span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">usePlugin</span><span class="token punctuation">(</span>ImagesPlugin<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">ImagesPlugin<span class="token punctuation">.</span>ImagesConfigure</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">configureImages</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> ImagesPlugin plugin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
|
|
<span class="token comment">// uses supplied Resources</span>
|
|
plugin<span class="token punctuation">.</span><span class="token function">defaultMediaDecoder</span><span class="token punctuation">(</span>DefaultMediaDecoder<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span><span class="token function">getResources</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// uses Resources.getSystem()</span>
|
|
plugin<span class="token punctuation">.</span><span class="token function">defaultMediaDecoder</span><span class="token punctuation">(</span>DefaultMediaDecoder<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h2 id="asyncdrawablescheduler"><a href="#asyncdrawablescheduler" aria-hidden="true" class="header-anchor">#</a> AsyncDrawableScheduler</h2> <p><code>AsyncDrawableScheduler</code> is used in order to give <code>AsyncDrawable</code> a way to invalidate <code>TextView</code>
|
|
that is holding it. A plugin that is dealing with <code>AsyncDrawable</code> should always call these methods:</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">final</span> Markwon markwon <span class="token operator">=</span> Markwon<span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">usePlugin</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">AbstractMarkwonPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">beforeSetText</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> TextView textView<span class="token punctuation">,</span> <span class="token annotation punctuation">@NonNull</span> Spanned markdown<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
AsyncDrawableScheduler<span class="token punctuation">.</span><span class="token function">unschedule</span><span class="token punctuation">(</span>textView<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">afterSetText</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> TextView textView<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
AsyncDrawableScheduler<span class="token punctuation">.</span><span class="token function">schedule</span><span class="token punctuation">(</span>textView<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p> <p>Starting with <span class="badge tip top" data-v-099ab69c>4.0.0</span> multiple plugins can call <code>AsyncDrawableScheduler#schedule</code>
|
|
method without the penalty to process <code>AsyncDrawable</code> callbacks multiple times (internally caches
|
|
state which ensures that a <code>TextView</code> is processed only once the text has changed).</p></div> <h2 id="errorhandler"><a href="#errorhandler" aria-hidden="true" class="header-anchor">#</a> ErrorHandler</h2> <p>An <code>ErrorHandler</code> can be used to receive an error that has happened during image loading
|
|
and (optionally) return an error drawable to be displayed instead</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">final</span> Markwon markwon <span class="token operator">=</span> Markwon<span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">usePlugin</span><span class="token punctuation">(</span>ImagesPlugin<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">ImagesPlugin<span class="token punctuation">.</span>ImagesConfigure</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">configureImages</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> ImagesPlugin plugin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
plugin<span class="token punctuation">.</span><span class="token function">errorHandler</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">ImagesPlugin<span class="token punctuation">.</span>ErrorHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Nullable</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> Drawable <span class="token function">handleError</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> String url<span class="token punctuation">,</span> <span class="token annotation punctuation">@NonNull</span> Throwable throwable<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> null<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h2 id="placeholderprovider"><a href="#placeholderprovider" aria-hidden="true" class="header-anchor">#</a> PlaceholderProvider</h2> <p>To display a placeholder during image loading <code>PlaceholderProvider</code> can be used:</p> <div class="language-java extra-class"><pre class="language-java"><code><span class="token keyword">final</span> Markwon markwon <span class="token operator">=</span> Markwon<span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">usePlugin</span><span class="token punctuation">(</span>ImagesPlugin<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">ImagesPlugin<span class="token punctuation">.</span>ImagesConfigure</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">configureImages</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> ImagesPlugin plugin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
plugin<span class="token punctuation">.</span><span class="token function">placeholderProvider</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">ImagesPlugin<span class="token punctuation">.</span>PlaceholderProvider</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Nullable</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> Drawable <span class="token function">providePlaceholder</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> AsyncDrawable drawable<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> null<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p> <p>If your placeholder drawable has <em>specific</em> size which is not the same an image that is being loaded,
|
|
you can manually assign bounds to the placeholder:</p> <div class="language-java extra-class"><pre class="language-java"><code>plugin<span class="token punctuation">.</span><span class="token function">placeholderProvider</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">ImagesPlugin<span class="token punctuation">.</span>PlaceholderProvider</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token annotation punctuation">@Override</span>
|
|
<span class="token keyword">public</span> Drawable <span class="token function">providePlaceholder</span><span class="token punctuation">(</span><span class="token annotation punctuation">@NonNull</span> AsyncDrawable drawable<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">final</span> ColorDrawable placeholder <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ColorDrawable</span><span class="token punctuation">(</span>Color<span class="token punctuation">.</span>BLUE<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// these bounds will be used to display a placeholder,</span>
|
|
<span class="token comment">// so even if loading image has size `width=100%`, placeholder</span>
|
|
<span class="token comment">// bounds won't be affected by it</span>
|
|
placeholder<span class="token punctuation">.</span><span class="token function">setBounds</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">48</span><span class="token punctuation">,</span> <span class="token number">48</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span> placeholder<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div></div> <hr> <div class="tip custom-block"><p class="custom-block-title">TIP</p> <p>If you are using <a href="/Markwon/docs/v4/html/">html</a> you do not have to additionally setup
|
|
images displayed via <code><img></code> tag, as <code>HtmlPlugin</code> automatically uses configured
|
|
image loader. But images referenced in HTML come with additional support for
|
|
sizes, which is not supported natively by markdown, allowing absolute or relative sizes:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./assets/my-image<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
</code></pre></div></div></div> <div class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">7/16/2020, 12:14:12 PM</span></div></div> <div class="page-nav"><p class="inner"><span class="prev">
|
|
←
|
|
<a href="/Markwon/docs/v4/html/" class="prev">
|
|
HTML
|
|
</a></span> <span class="next"><a href="/Markwon/docs/v4/image-coil/">
|
|
Image Coil
|
|
</a>
|
|
→
|
|
</span></p></div> </div> <!----></div></div>
|
|
<script src="/Markwon/assets/js/75.1d59d27c.js" defer></script><script src="/Markwon/assets/js/3.eaac0903.js" defer></script><script src="/Markwon/assets/js/16.076204be.js" defer></script><script src="/Markwon/assets/js/app.bdfd2bc6.js" defer></script>
|
|
</body>
|
|
</html>
|