Move documentation to use the embedded fiddle elements.

Now code and images will always be in sync, and
users can edit and run the fiddles that are inline with
the docs.

Previews:
  https://skia.org/user/api/skcanvas?cl=8507
  https://skia.org/user/api/skpaint?cl=8507

BUG=skia:

NOTRY=true
DOCS_PREVIEW= https://skia.org/?cl=8507

Change-Id: Iaf62d98d9aa73cf7b4e4a6baa522402ecb9e505a
Reviewed-on: https://skia-review.googlesource.com/8507
Reviewed-by: Hal Canary <halcanary@google.com>
Commit-Queue: Hal Canary <halcanary@google.com>

2 files changed, 26 insertions, 585 deletions

diff --git a/site/user/api/skcanvas.md b/site/user/api/skcanvas.md
index 659cbf14a5..a1e3428a32 100644
--- a/site/user/api/skcanvas.md
+++ b/site/user/api/skcanvas.md
@@ -12,28 +12,7 @@ Here is an example of a set of drawing commands to draw a filled
 heptagram.  This function can be cut and pasted into
 [fiddle.skia.org](https://fiddle.skia.org/).
 
-<!--?prettify lang=cc?-->
-
-    void draw(SkCanvas* canvas) {
-        const SkScalar scale = 256.0f;
-        const SkScalar R = 0.45f * scale;
-        const SkScalar TAU = 6.2831853f;
-        SkPath path;
-        path.moveTo(R, 0.0f);
-        for (int i = 1; i < 7; ++i) {
-            SkScalar theta = 3 * i * TAU / 7;
-            path.lineTo(R * cos(theta), R * sin(theta));
-        }
-        path.close();
-        SkPaint p;
-        p.setAntiAlias(true);
-        canvas->clear(SK_ColorWHITE);
-        canvas->translate(0.5f * scale, 0.5f * scale);
-        canvas->drawPath(path, p);
-    }
-
-<a href='https://fiddle.skia.org/c/@skcanvas_star'><img
-  src='https://fiddle.skia.org/i/@skcanvas_star_raster.png'></a>
+<fiddle-embed name='@skcanvas_star'></fiddle-embed>
 
 Details
 -------
@@ -46,21 +25,7 @@ store any other drawing attributes in the context (e.g. color, pen
 size). Rather, these are specified explicitly in each draw call, via a
 SkPaint.
 
-<!--?prettify lang=cc?-->
-
-    void draw(SkCanvas* canvas) {
-        canvas->save();
-        canvas->translate(SkIntToScalar(128), SkIntToScalar(128));
-        canvas->rotate(SkIntToScalar(45));
-        SkRect rect = SkRect::MakeXYWH(-90.5f, -90.5f, 181.0f, 181.0f);
-        SkPaint paint;
-        paint.setColor(SK_ColorBLUE);
-        canvas->drawRect(rect, paint);
-        canvas->restore();
-    }
-
-<a href='https://fiddle.skia.org/c/@skcanvas_square'><img
-  src='https://fiddle.skia.org/i/@skcanvas_square_raster.png'></a>
+<fiddle-embed name='@skcanvas_square'></fiddle-embed>
 
 The code above will draw a rectangle rotated by 45 degrees. Exactly
 what color and style the rect will be drawn in is described by the
@@ -96,52 +61,7 @@ drawColor(), and save yourself having to allocate a paint.
 All of the other draw APIs are similar, each one ending with a paint
 parameter.
 
-<!--?prettify lang=cc?-->
-
-    SkBitmap source;
-
-    void draw(SkCanvas* canvas) {
-        canvas->drawColor(SK_ColorWHITE);
-
-        SkPaint paint;
-        paint.setStyle(SkPaint::kStroke_Style);
-        paint.setStrokeWidth(4);
-        paint.setColor(SK_ColorRED);
-
-        SkRect rect = SkRect::MakeXYWH(50, 50, 40, 60);
-        canvas->drawRect(rect, paint);
-
-        SkRRect oval;
-        oval.setOval(rect);
-        oval.offset(40, 60);
-        paint.setColor(SK_ColorBLUE);
-        canvas->drawRRect(oval, paint);
-
-        paint.setColor(SK_ColorCYAN);
-        canvas->drawCircle(180, 50, 25, paint);
-
-        rect.offset(80, 0);
-        paint.setColor(SK_ColorYELLOW);
-        canvas->drawRoundRect(rect, 10, 10, paint);
-
-        SkPath path;
-        path.cubicTo(768, 0, -512, 256, 256, 256);
-        paint.setColor(SK_ColorGREEN);
-        canvas->drawPath(path, paint);
-
-        canvas->drawImage(image, 128, 128, &paint);
-
-        SkRect rect2 = SkRect::MakeXYWH(0, 0, 40, 60);
-        canvas->drawImageRect(image, rect2, &paint);
-
-        SkPaint paint2;
-        const char text[] = "Hello, Skia!";
-        canvas->drawText(text, strlen(text), 50, 25, paint2);
-    }
-
-
-<a href='https://fiddle.skia.org/c/@skcanvas_paint'><img
-  src='https://fiddle.skia.org/i/@skcanvas_paint_raster.png'></a>
+<fiddle-embed name='@skcanvas_paint'></fiddle-embed>
 
 In some of the calls, we pass a pointer, rather than a reference, to
 the paint. In those instances, the paint parameter may be null. In all
diff --git a/site/user/api/skpaint.md b/site/user/api/skpaint.md
index a1e17eed26..0d404cacc8 100644
--- a/site/user/api/skpaint.md
+++ b/site/user/api/skpaint.md
@@ -29,63 +29,13 @@ and into (multiple) paint objects, allows canvas' save/restore to be
 that much more efficient, as all they have to do is maintain the stack
 of matrix and clip settings.
 
-<!--?prettify lang=cc?-->
-
-    void draw(SkCanvas* canvas) {
-        canvas->clear(SK_ColorWHITE);
-
-        SkPaint paint1, paint2, paint3;
-
-        paint1.setTextSize(64.0f);
-        paint1.setAntiAlias(true);
-        paint1.setColor(SkColorSetRGB(255, 0, 0));
-        paint1.setStyle(SkPaint::kFill_Style);
-
-        paint2.setTextSize(64.f);
-        paint2.setAntiAlias(true);
-        paint2.setColor(SkColorSetRGB(0, 136, 0));
-        paint2.setStyle(SkPaint::kStroke_Style);
-        paint2.setStrokeWidth(SkIntToScalar(3));
-
-        paint3.setTextSize(64.0f);
-        paint3.setAntiAlias(true);
-        paint3.setColor(SkColorSetRGB(136, 136, 136));
-        paint3.setTextScaleX(SkFloatToScalar(1.5f));
-
-        const char text[] = "Skia!";
-        canvas->drawText(text, strlen(text), 20.0f, 64.0f,  paint1);
-        canvas->drawText(text, strlen(text), 20.0f, 144.0f, paint2);
-        canvas->drawText(text, strlen(text), 20.0f, 224.0f, paint3);
-    }
-
-<a href='https://fiddle.skia.org/c/@skpaint_skia'><img
-  src='https://fiddle.skia.org/i/@skpaint_skia_raster.png'></a>
+<fiddle-embed name='@skpaint_skia'></fiddle-embed>
 
 This shows three different paints, each set up to draw in a different
 style. Now the caller can intermix these paints freely, either using
 them as is, or modifying them as the drawing proceeds.
 
-<!--?prettify lang=cc?-->
-
-    SkPaint paint1, paint2, paint3;
-    paint2.setStyle(SkPaint::kStroke_Style);
-    paint2.setStrokeWidth(3);
-    paint3.setAntiAlias(true);
-    paint3.setColor(SK_ColorRED);
-    paint3.setTextSize(80);
-
-    canvas->drawRect(SkRect::MakeXYWH(10,10,60,20), paint1);
-    canvas->drawRect(SkRect::MakeXYWH(80,10,60,20), paint2);
-
-    paint2.setStrokeWidth(SkIntToScalar(5));
-    canvas->drawOval(SkRect::MakeXYWH(150,10,60,20), paint2);
-
-    canvas->drawText("SKIA", 4, 20, 120, paint3);
-    paint3.setColor(SK_ColorBLUE);
-    canvas->drawText("SKIA", 4, 20, 220, paint3);
-
-<a href='https://fiddle.skia.org/c/@skpaint_mix'><img
-  src='https://fiddle.skia.org/i/@skpaint_mix_raster.png'></a>
+<fiddle-embed name='@skpaint_mix'></fiddle-embed>
 
 Beyond simple attributes such as color, strokes, and text values,
 paints support effects. These are subclasses of different aspects of
@@ -96,23 +46,7 @@ pipeline.
 For example, to draw using a gradient instead of a single color,
 assign a SkShader to the paint.
 
-<!--?prettify lang=cc?-->
-
-    void draw(SkCanvas* canvas) {
-        SkPoint points[2] = {
-            SkPoint::Make(0.0f, 0.0f),
-            SkPoint::Make(256.0f, 256.0f)
-        };
-        SkColor colors[2] = {SK_ColorBLUE, SK_ColorYELLOW};
-        SkPaint paint;
-        paint.setShader(SkGradientShader::MakeLinear(
-                         points, colors, nullptr, 2,
-                         SkShader::kClamp_TileMode, 0, nullptr));
-        canvas->drawPaint(paint);
-    }
-
-<a href='https://fiddle.skia.org/c/@skpaint_shader'><img
-  src='https://fiddle.skia.org/i/@skpaint_shader_raster.png'></a>
+<fiddle-embed name='@skpaint_shader'></fiddle-embed>
 
 Now, anything drawn with that paint will be drawn with the gradient
 specified in the call to `MakeLinear()`. The shader object that is
@@ -159,88 +93,7 @@ modes.  In this example the source is a solid magenta color with a
 horizontal alpha gradient and the destination is a solid cyan color
 with a vertical alpha gradient.
 
-<!--?prettify lang=cc?-->
-
-    void draw(SkCanvas* canvas) {
-        SkXfermode::Mode modes[] = {
-            SkXfermode::kClear_Mode,
-            SkXfermode::kSrc_Mode,
-            SkXfermode::kDst_Mode,
-            SkXfermode::kSrcOver_Mode,
-            SkXfermode::kDstOver_Mode,
-            SkXfermode::kSrcIn_Mode,
-            SkXfermode::kDstIn_Mode,
-            SkXfermode::kSrcOut_Mode,
-            SkXfermode::kDstOut_Mode,
-            SkXfermode::kSrcATop_Mode,
-            SkXfermode::kDstATop_Mode,
-            SkXfermode::kXor_Mode,
-            SkXfermode::kPlus_Mode,
-            SkXfermode::kModulate_Mode,
-            SkXfermode::kScreen_Mode,
-            SkXfermode::kOverlay_Mode,
-            SkXfermode::kDarken_Mode,
-            SkXfermode::kLighten_Mode,
-            SkXfermode::kColorDodge_Mode,
-            SkXfermode::kColorBurn_Mode,
-            SkXfermode::kHardLight_Mode,
-            SkXfermode::kSoftLight_Mode,
-            SkXfermode::kDifference_Mode,
-            SkXfermode::kExclusion_Mode,
-            SkXfermode::kMultiply_Mode,
-            SkXfermode::kHue_Mode,
-            SkXfermode::kSaturation_Mode,
-            SkXfermode::kColor_Mode,
-            SkXfermode::kLuminosity_Mode,
-        };
-        SkRect rect = SkRect::MakeWH(64.0f, 64.0f);
-        SkPaint text, stroke, src, dst;
-        stroke.setStyle(SkPaint::kStroke_Style);
-        text.setTextSize(24.0f);
-        text.setAntiAlias(true);
-        SkPoint srcPoints[2] = {
-            SkPoint::Make(0.0f, 0.0f),
-            SkPoint::Make(64.0f, 0.0f)
-        };
-        SkColor srcColors[2] = {
-            SK_ColorMAGENTA & 0x00FFFFFF,
-            SK_ColorMAGENTA};
-        src.setShader(SkGradientShader::MakeLinear(
-                    srcPoints, srcColors, nullptr, 2,
-                    SkShader::kClamp_TileMode, 0, nullptr));
-
-        SkPoint dstPoints[2] = {
-            SkPoint::Make(0.0f, 0.0f),
-            SkPoint::Make(0.0f, 64.0f)
-        };
-        SkColor dstColors[2] = {
-            SK_ColorCYAN & 0x00FFFFFF,
-            SK_ColorCYAN};
-        dst.setShader(SkGradientShader::MakeLinear(
-                    dstPoints, dstColors, nullptr, 2,
-                    SkShader::kClamp_TileMode, 0, nullptr));
-        canvas->clear(SK_ColorWHITE);
-        size_t N = sizeof(modes) / sizeof(modes[0]);
-        size_t K = (N - 1) / 3 + 1;
-        SkASSERT(K * 64 == 640);  // tall enough
-        for (size_t i = 0; i < N; ++i) {
-            SkAutoCanvasRestore autoCanvasRestore(canvas, true);
-            canvas->translate(192.0f * (i / K), 64.0f * (i % K));
-            const char* desc = SkXfermode::ModeName(modes[i]);
-            canvas->drawText(desc, strlen(desc), 68.0f, 30.0f, text);
-            canvas->clipRect(SkRect::MakeWH(64.0f, 64.0f));
-            canvas->drawColor(SK_ColorLTGRAY);
-            (void)canvas->saveLayer(nullptr, nullptr);
-            canvas->clear(SK_ColorTRANSPARENT);
-            canvas->drawPaint(dst);
-            src.setXfermodeMode(modes[i]);
-            canvas->drawPaint(src);
-            canvas->drawRect(rect, stroke);
-        }
-    }
-
-<a href='https://fiddle.skia.org/c/@skpaint_xfer'><img
-  src='https://fiddle.skia.org/i/@skpaint_xfer_raster.png'></a>
+<fiddle-embed name='@skpaint_xfer'></fiddle-embed>
 
 <span id="SkShader"></span>
 
@@ -251,111 +104,32 @@ Several shaders are defined (besides the linear gradient already mentioned):
 
 *   Bitmap Shader
 
-    <!--?prettify lang=cc?-->
-
-        canvas->clear(SK_ColorWHITE);
-        SkMatrix matrix;
-        matrix.setScale(0.75f, 0.75f);
-        matrix.preRotate(30.0f);
-        SkPaint paint;
-        paint.setShader(
-            image->makeShader(
-                SkShader::kRepeat_TileMode,
-                SkShader::kRepeat_TileMode,
-                &matrix));
-        canvas->drawPaint(paint);
-
-    <a href='https://fiddle.skia.org/c/@skpaint_bitmap_shader'><img
-      src='https://fiddle.skia.org/i/@skpaint_bitmap_shader_raster.png'></a>
+    <fiddle-embed name='@skpaint_bitmap_shader'></fiddle-embed>
 
 *   Radial Gradient Shader
 
-    <!--?prettify lang=cc?-->
-
-        SkColor colors[2] = {SK_ColorBLUE, SK_ColorYELLOW};
-        SkPaint paint;
-        paint.setShader(SkGradientShader::MakeRadial(
-                    SkPoint::Make(128.0f, 128.0f), 180.0f,
-                    colors, nullptr, 2, SkShader::kClamp_TileMode, 0, nullptr));
-        canvas->drawPaint(paint);
-
-    <a href='https://fiddle.skia.org/c/@skpaint_radial'><img
-      src='https://fiddle.skia.org/i/@skpaint_radial_raster.png'></a>
+    <fiddle-embed name='@skpaint_radial'></fiddle-embed>
 
 *  Two-Point Conical Gradient Shader
 
-    <!--?prettify lang=cc?-->
-
-        SkColor colors[2] = {SK_ColorBLUE, SK_ColorYELLOW};
-        SkPaint paint;
-        paint.setShader(SkGradientShader::MakeTwoPointConical(
-              SkPoint::Make(128.0f, 128.0f), 128.0f,
-              SkPoint::Make(128.0f, 16.0f), 16.0f,
-              colors, nullptr, 2, SkShader::kClamp_TileMode, 0, nullptr));
-        canvas->drawPaint(paint);
-
-    <a href='https://fiddle.skia.org/c/@skpaint_2pt'><img
-      src='https://fiddle.skia.org/i/@skpaint_2pt_raster.png'></a>
+    <fiddle-embed name='@skpaint_2pt'></fiddle-embed>
 
 
 *   Sweep Gradient Shader
 
-    <!--?prettify lang=cc?-->
-
-        SkColor colors[4] = {
-            SK_ColorCYAN, SK_ColorMAGENTA, SK_ColorYELLOW, SK_ColorCYAN};
-        SkPaint paint;
-        paint.setShader(SkGradientShader::MakeSweep(
-                    128.0f, 128.0f, colors, nullptr, 4, 0, nullptr));
-        canvas->drawPaint(paint);
-
-    <a href='https://fiddle.skia.org/c/@skpaint_sweep'><img
-      src='https://fiddle.skia.org/i/@skpaint_sweep_raster.png'></a>
+    <fiddle-embed name='@skpaint_sweep'></fiddle-embed>
 
 *   Fractal Perlin Noise Shader
 
-    <!--?prettify lang=cc?-->
-
-        canvas->clear(SK_ColorWHITE);
-        SkPaint paint;
-        paint.setShader(SkPerlinNoiseShader::MakeFractalNoise(
-                 0.05f, 0.05f, 4, 0.0f, nullptr));
-        canvas->drawPaint(paint);
-
-    <a href='https://fiddle.skia.org/c/@skpaint_perlin'><img
-    src='https://fiddle.skia.org/i/@skpaint_perlin_raster.png'></a>
+    <fiddle-embed name='@skpaint_perlin'></fiddle-embed>
 
 *   Turbulence Perlin Noise Shader
 
-    <!--?prettify lang=cc?-->
-
-        canvas->clear(SK_ColorWHITE);
-        SkPaint paint;
-        paint.setShader(SkPerlinNoiseShader::MakeTurbulence(
-                 0.05f, 0.05f, 4, 0.0f, nullptr));
-        canvas->drawPaint(paint);
-
-    <a href='https://fiddle.skia.org/c/@skpaint_turb'><img
-      src='https://fiddle.skia.org/i/@skpaint_turb_raster.png'></a>
+    <fiddle-embed name='@skpaint_turb'></fiddle-embed>
 
 *   Compose Shader
 
-    <!--?prettify lang=cc?-->
-
-        SkColor colors[2] = {SK_ColorBLUE, SK_ColorYELLOW};
-        SkPaint paint;
-        paint.setShader(
-            SkShader::MakeComposeShader(
-                SkGradientShader::MakeRadial(
-                    SkPoint::Make(128.0f, 128.0f), 180.0f,
-                    colors, nullptr, 2, SkShader::kClamp_TileMode, 0, nullptr),
-                SkPerlinNoiseShader::MakeTurbulence(0.025f, 0.025f, 2, 0.0f, nullptr),
-                SkXfermode::kDifference_Mode)
-            );
-        canvas->drawPaint(paint);
-
-    <a href='https://fiddle.skia.org/c/@skpaint_compose_shader'><img
-      src='https://fiddle.skia.org/i/@skpaint_compose_shader_raster.png'></a>
+    <fiddle-embed name='@skpaint_compose_shader'></fiddle-embed>
 
 
 <span id="SkMaskFilter"></span>
@@ -365,20 +139,7 @@ SkMaskFilter
 
 *   Blur Mask Filter
 
-    <!--?prettify lang=cc?-->
-
-        canvas->drawText(text, strlen(text), 0, 160, paint);
-        canvas->drawColor(SK_ColorWHITE);
-        SkPaint paint;
-        paint.setAntiAlias(true);
-        paint.setTextSize(120);
-        paint.setMaskFilter(SkBlurMaskFilter::Make(
-                kNormal_SkBlurStyle, 5.0f, 0));
-        const char text[] = "Skia";
-        canvas->drawText(text, strlen(text), 0, 160, paint);
-
-    <a href='https://fiddle.skia.org/c/@skpaint_blur_mask_filter'><img
-      src='https://fiddle.skia.org/i/@skpaint_blur_mask_filter_raster.png'></a>
+    <fiddle-embed name='@skpaint_blur_mask_filter'></fiddle-embed>
 
 
 <span id="SkColorFilter"></span>
@@ -388,96 +149,11 @@ SkColorFilter
 
 *   Color Matrix Color Filter
 
-    <!--?prettify lang=cc?-->
-
-        void f(SkCanvas* c, SkScalar x, SkScalar y, SkScalar colorMatrix[20]) {
-            SkPaint paint;
-            paint.setColorFilter(SkColorFilter::MakeMatrixFilterRowMajor255(colorMatrix));
-            c->drawImage(image, x, y, &paint);
-        }
-
-        void draw(SkCanvas* c) {
-            c->scale(0.25, 0.25);
-            SkScalar colorMatrix1[20] = {
-                0, 1, 0, 0, 0,
-                0, 0, 1, 0, 0,
-                1, 0, 0, 0, 0,
-                0, 0, 0, 1, 0};
-            f(c, 0, 0, colorMatrix1);
-
-            SkScalar grayscale[20] = {
-                0.21, 0.72, 0.07, 0.0, 0.0,
-                0.21, 0.72, 0.07, 0.0, 0.0,
-                0.21, 0.72, 0.07, 0.0, 0.0,
-                0.0,  0.0,  0.0,  1.0, 0.0};
-            f(c, 512, 0, grayscale);
-
-            SkScalar colorMatrix3[20] = {
-                -1, 1, 1, 0, 0,
-                1, -1, 1, 0, 0,
-                1, 1, -1, 0, 0,
-                0, 0, 0, 1, 0};
-            f(c, 0, 512, colorMatrix3);
-
-            SkScalar colorMatrix4[20] = {
-                0.0, 0.5, 0.5, 0, 0,
-                0.5, 0.0, 0.5, 0, 0,
-                0.5, 0.5, 0.0, 0, 0,
-                0.0, 0.0, 0.0, 1, 0};
-            f(c, 512, 512, colorMatrix4);
-
-            SkScalar highContrast[20] = {
-                4.0, 0.0, 0.0, 0.0, -4.0 * 255 / (4.0 - 1),
-                0.0, 4.0, 0.0, 0.0, -4.0 * 255 / (4.0 - 1),
-                0.0, 0.0, 4.0, 0.0, -4.0 * 255 / (4.0 - 1),
-                0.0, 0.0, 0.0, 1.0, 0.0};
-            f(c, 1024, 0, highContrast);
-
-            SkScalar colorMatrix6[20] = {
-                0, 0, 1, 0, 0,
-                1, 0, 0, 0, 0,
-                0, 1, 0, 0, 0,
-                0, 0, 0, 1, 0};
-            f(c, 1024, 512, colorMatrix6);
-
-            SkScalar sepia[20] = {
-                0.393, 0.769, 0.189, 0.0, 0.0,
-                0.349, 0.686, 0.168, 0.0, 0.0,
-                0.272, 0.534, 0.131, 0.0, 0.0,
-                0.0,   0.0,   0.0,   1.0, 0.0};
-            f(c, 1536, 0, sepia);
-
-            SkScalar inverter[20] = {
-                -1,  0,  0, 0, 255,
-                 0, -1,  0, 0, 255,
-                 0,  0, -1, 0, 255,
-                 0,  0,  0, 1, 0};
-            f(c, 1536, 512, inverter);
-        }
-
-    <a href='https://fiddle.skia.org/c/@skpaint_matrix_color_filter'><img
-    src='https://fiddle.skia.org/i/@skpaint_matrix_color_filter_raster.png'></a>
+    <fiddle-embed name='@skpaint_matrix_color_filter'></fiddle-embed>
 
 *   Color Table Color Filter
 
-    <!--?prettify lang=cc?-->
-
-        void draw(SkCanvas* canvas) {
-            canvas->scale(0.5, 0.5);
-            uint8_t ct[256];
-            for (int i = 0; i < 256; ++i) {
-                int x = (i - 96) * 255 / 64;
-                ct[i] = x < 0 ? 0 : x > 255 ? 255 : x;
-            }
-            SkPaint paint;
-            paint.setColorFilter(
-                    SkTableColorFilter::MakeARGB(nullptr, ct, ct, ct));
-            canvas->drawImage(image, 0, 0, &paint);
-        }
-
-    <a href='https://fiddle.skia.org/c/@skpaint_color_table_filter'><img
-      src='https://fiddle.skia.org/i/@skpaint_color_table_filter_raster.png'></a>
-
+    <fiddle-embed name='@skpaint_color_table_filter'></fiddle-embed>
 
 <span id="SkPathEffect"></span>
 
@@ -487,200 +163,45 @@ SkPathEffect
 *   SkPath2DPathEffect: Stamp the specified path to fill the shape,
     using the matrix to define the latice.
 
-    <!--?prettify lang=cc?-->
-
-        void draw(SkCanvas* canvas) {
-          SkScalar scale = 10.0f;
-          SkPath path;
-            static const int8_t pts[] = { 2, 2, 1, 3, 0, 3, 2, 1, 3, 1,
-                 4, 0, 4, 1, 5, 1, 4, 2, 4, 3, 2, 5, 2, 4, 3, 3, 2, 3 };
-            path.moveTo(2 * scale, 3 * scale);
-            for (size_t i = 0 ; i < sizeof(pts)/sizeof(pts[0]); i += 2) {
-                path.lineTo(pts[i] * scale, pts[i + 1] * scale);
-            }
-            path.close();
-            SkMatrix matrix = SkMatrix::MakeScale(4 * scale);
-            SkPaint paint;
-            paint.setPathEffect(SkPath2DPathEffect::Make(matrix, path));
-            paint.setAntiAlias(true);
-            canvas->clear(SK_ColorWHITE);
-            SkRect bounds = canvas->getLocalClipBounds();
-            bounds.outset(2 * scale, 2 * scale);
-            canvas->drawRect(bounds, paint);
-        }
-
-    <a href='https://fiddle.skia.org/c/@skpaint_path_2d_path_effect'><img
-      src='https://fiddle.skia.org/i/@skpaint_path_2d_path_effect_raster.png'></a>
+    <fiddle-embed name='@skpaint_path_2d_path_effect'></fiddle-embed>
 
 *   SkLine2DPathEffect: a special case of SkPath2DPathEffect where the
     path is a straight line to be stroked, not a path to be filled.
 
-    <!--?prettify lang=cc?-->
-
-        void draw(SkCanvas* canvas) {
-            SkPaint paint;
-            SkMatrix lattice;
-            lattice.setScale(8.0f, 8.0f);
-            lattice.preRotate(30.0f);
-            paint.setPathEffect(SkLine2DPathEffect::Make(0.0f, lattice));
-            paint.setAntiAlias(true);
-            SkRect bounds = canvas->getLocalClipBounds();
-            bounds.outset(8.0f, 8.0f);
-            canvas->clear(SK_ColorWHITE);
-            canvas->drawRect(bounds, paint);
-        }
-
-    <a href='https://fiddle.skia.org/c/@skpaint_line_2d_path_effect'><img
-      src='https://fiddle.skia.org/i/@skpaint_line_2d_path_effect_raster.png'></a>
+    <fiddle-embed name='@skpaint_line_2d_path_effect'></fiddle-embed>
 
 *   SkPath1DPathEffect: create dash-like effects by replicating the specified path along the drawn path.
 
-    <!--?prettify lang=cc?-->
-
-        void draw(SkCanvas* canvas) {
-            SkPaint paint;
-            SkPath path;
-            path.addOval(SkRect::MakeWH(16.0f, 6.0f));
-            paint.setPathEffect(SkPath1DPathEffect::Make(
-                    path, 32.0f, 0.0f, SkPath1DPathEffect::kRotate_Style));
-            paint.setAntiAlias(true);
-            canvas->clear(SK_ColorWHITE);
-            canvas->drawCircle(128.0f, 128.0f, 122.0f, paint);
-        }
-
-    <a href='https://fiddle.skia.org/c/@skpaint_path_1d_path_effect'><img
-      src='https://fiddle.skia.org/i/@skpaint_path_1d_path_effect_raster.png'></a>
+    <fiddle-embed name='@skpaint_path_1d_path_effect'></fiddle-embed>
 
 *   SkArcToPathEffect
 
 	The following few examples use this function:
 
-    <!--?prettify lang=cc?-->
-
-        SkPath star() {
-            const SkScalar R = 115.2f, C = 128.0f;
-            SkPath path;
-            path.moveTo(C + R, C);
-            for (int i = 1; i < 8; ++i) {
-                SkScalar a = 2.6927937f * i;
-                path.lineTo(C + R * cos(a), C + R * sin(a));
-            }
-            return path;
-        }
-        void draw(SkCanvas* canvas) {
-            SkPaint paint;
-            paint.setPathEffect(SkArcToPathEffect::Make(8.0f));
-            paint.setStyle(SkPaint::kStroke_Style);
-            paint.setAntiAlias(true);
-            canvas->clear(SK_ColorWHITE);
-            SkPath path(star());
-            canvas->drawPath(path, paint);
-        }
-
-    <a href='https://fiddle.skia.org/c/@skpaint_arc_to_path_effect'><img
-      src='https://fiddle.skia.org/i/@skpaint_arc_to_path_effect_raster.png'></a>
-
+    <fiddle-embed name='@skpaint_arc_to_path_effect'></fiddle-embed>
 
 *   SkCornerPathEffect: a path effect that can turn sharp corners into
     various treatments (e.g. rounded corners).
 
-    <!--?prettify lang=cc?-->
-
-        void draw(SkCanvas* canvas) {
-            SkPaint paint;
-            paint.setPathEffect(SkCornerPathEffect::Make(32.0f));
-            paint.setStyle(SkPaint::kStroke_Style);
-            paint.setAntiAlias(true);
-            canvas->clear(SK_ColorWHITE);
-            const SkScalar R = 115.2f;
-            SkPath path(star());
-            canvas->drawPath(path, paint);
-        }
-
-    <a href='https://fiddle.skia.org/c/@skpaint_corner_path_effects'><img src='https://fiddle.skia.org/i/@skpaint_corner_path_effects_raster.png'></a>
+    <fiddle-embed name='@skpaint_corner_path_effects'></fiddle-embed>
 
 *   SkDashPathEffect:  a path effect that implements dashing.
 
-    <!--?prettify lang=cc?-->
-
-        void draw(SkCanvas* canvas) {
-            const SkScalar intervals[] = { 10.0f, 5.0f, 2.0f, 5.0f };
-            size_t count  = sizeof(intervals) / sizeof(intervals[0]);
-            SkPaint paint;
-            paint.setPathEffect(SkDashPathEffect::Make(intervals, count, 0.0f));
-            paint.setStyle(SkPaint::kStroke_Style);
-            paint.setStrokeWidth(2.0f);
-            paint.setAntiAlias(true);
-            canvas->clear(SK_ColorWHITE);
-            SkPath path(star());
-            canvas->drawPath(path, paint);
-        }
-
-    <a href='https://fiddle.skia.org/c/@skpaint_dash_path_effect'><img src='https://fiddle.skia.org/i/@skpaint_dash_path_effect_raster.png'></a>
+    <fiddle-embed name='@skpaint_dash_path_effect'></fiddle-embed>
 
 *   SkDiscretePathEffect: This path effect chops a path into discrete
     segments, and randomly displaces them.
 
-    <!--?prettify lang=cc?-->
-
-        void draw(SkCanvas* canvas) {
-            SkPaint paint;
-            paint.setPathEffect(SkDiscretePathEffect::Make(10.0f, 4.0f));
-            paint.setStyle(SkPaint::kStroke_Style);
-            paint.setStrokeWidth(2.0f);
-            paint.setAntiAlias(true);
-            canvas->clear(SK_ColorWHITE);
-            SkPath path(star());
-            canvas->drawPath(path, paint);
-        }
-
-    <a href='https://fiddle.skia.org/c/@skpaint_discrete_path_effect'><img
-      src='https://fiddle.skia.org/i/@skpaint_discrete_path_effect_raster.png'></a>
+    <fiddle-embed name='@skpaint_discrete_path_effect'></fiddle-embed>
 
 *   SkComposePathEffect: a pathEffect whose effect is to apply
     first the inner pathEffect and the the outer pathEffect (i.e.
     outer(inner(path))).
 
-    <!--?prettify lang=cc?-->
-
-        void draw(SkCanvas* canvas) {
-            const SkScalar intervals[] = { 10.0f, 5.0f, 2.0f, 5.0f };
-            size_t count  = sizeof(intervals) / sizeof(intervals[0]);
-            SkPaint paint;
-            paint.setPathEffect(SkComposePathEffect::Make(
-                SkDashPathEffect::Make(intervals, count, 0.0f),
-                SkDiscretePathEffect::Make(10.0f, 4.0f)
-            ));
-            paint.setStyle(SkPaint::kStroke_Style);
-            paint.setStrokeWidth(2.0f);
-            paint.setAntiAlias(true);
-            canvas->clear(SK_ColorWHITE);
-            SkPath path(star());
-            canvas->drawPath(path, paint);
-        }
-
-    <a href='https://fiddle.skia.org/c/@skpaint_compose_path_effect'><img
-      src='https://fiddle.skia.org/i/@skpaint_compose_path_effect_raster.png'></a>
+    <fiddle-embed name='@skpaint_compose_path_effect'></fiddle-embed>
 
 *    SkSumPathEffect: a pathEffect whose effect is to apply two effects,
      in sequence (i.e. first(path) + second(path)).
 
-    <!--?prettify lang=cc?-->
-
-        void draw(SkCanvas* canvas) {
-            SkPaint paint;
-            paint.setPathEffect(SkSumPathEffect::Make(
-                SkDiscretePathEffect::Make(10.0f, 4.0f),
-                SkDiscretePathEffect::Make(10.0f, 4.0f, 1245u)
-            ));
-            paint.setStyle(SkPaint::kStroke_Style);
-            paint.setStrokeWidth(2.0f);
-            paint.setAntiAlias(true);
-            canvas->clear(SK_ColorWHITE);
-            SkPath path(star());
-            canvas->drawPath(path, paint);
-        }
-
-    <a href='https://fiddle.skia.org/c/@skpaint_sum_path_effect'><img
-      src='https://fiddle.skia.org/i/@skpaint_sum_path_effect_raster.png'></a>
+    <fiddle-embed name='@skpaint_sum_path_effect'></fiddle-embed>