feat: add bind image support

phodal · Mar 11, 2020 · 63badfd · 63badfd
1 parent 1dc1050
commit 63badfd
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/src/app/shared/components/markdown-render/markdown-render.component.ts b/src/app/shared/components/markdown-render/markdown-render.component.ts
@@ -13,6 +13,21 @@ export class MarkdownRenderComponent implements OnInit {
  constructor(private markdownService: MarkdownService) { }
 
  ngOnInit(): void {
+ const markedOptions: any = this.markdownService.options;
+ this.markdownService.renderer.image = (href: string, title: string, text: string): string => {
+ if (href === null) {
+ return text;
+ }
+ let out = '<img src="' + href + '" alt="' + text + '"';
+ if (title) {
+ out += ' title="' + title + '"';
+ }
+
+ out += markedOptions.xhtml ? '/>' : '>';
+ out += `<figcaption>${title}</figcaption>`;
+ return `<figure>${out}</figure>`;
+ };
+
  // this.markdownService.renderer.table = (header: string, body: string) => {
  // return '';
  // };

diff --git a/src/assets/docs/pattern.md b/src/assets/docs/pattern.md
@@ -1 +1 @@
-![Fluent Agency](assets/images/agile-fluency.png)
+![Fluent Agency](assets/images/agile-fluency.png "Fluent Agency")
diff --git a/src/styles/_markdown.scss b/src/styles/_markdown.scss
@@ -413,6 +413,12 @@
  margin: 1em auto;
  }
 
+ figcaption {
+ text-align: center;
+ padding: 8px;
+ color: #ccc;
+ }
+
  a {
  color: #1abc9c;
  text-decoration: none