├── .github ├── CODEOWNERS └── ISSUE_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .travis.yml ├── README.md ├── bower.json ├── demo ├── example.md └── index.html ├── formatconfig.json ├── gen-tsd.json ├── manifest.json ├── marked-element.js ├── marked-import.js ├── package-lock.json ├── package.json ├── polymer.json ├── test ├── index.html ├── marked-element.html ├── remoteSanitization.md ├── test.md ├── test1.md └── test2.md └── wct.conf.json /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @e111077 2 | /.travis.yml @azakus 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | ### Description 3 | 4 | 5 | ### Expected outcome 6 | 7 | 8 | 9 | ### Actual outcome 10 | 11 | 12 | 13 | ### Live Demo 14 | 15 | 16 | ### Steps to reproduce 17 | 18 | 23 | 24 | ### Browsers Affected 25 | 26 | - [ ] Chrome 27 | - [ ] Firefox 28 | - [ ] Safari 9 29 | - [ ] Safari 8 30 | - [ ] Safari 7 31 | - [ ] Edge 32 | - [ ] IE 11 33 | - [ ] IE 10 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components* 2 | bower-*.json 3 | node_modules 4 | *.d.ts 5 | *.tgz 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | *.tgz 2 | .github 3 | .travis.yml 4 | formatconfig.json 5 | gen-tsd.json 6 | test/ 7 | wct.conf.json 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | dist: trusty 3 | sudo: 'false' 4 | node_js: node 5 | addons: 6 | firefox: latest 7 | chrome: stable 8 | before_script: 9 | - npm install -g polymer-cli 10 | - git checkout package-lock.json 11 | - >- 12 | npm run format && git diff --exit-code || (echo -e '\n\033[31mERROR:\033[0m 13 | Project is not formatted. Please run "npm run format".' && false) 14 | script: 15 | - xvfb-run polymer test --module-resolution=node --npm 16 | - >- 17 | if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test 18 | --module-resolution=node --npm -s 'default'; fi 19 | env: 20 | global: 21 | - secure: >- 22 | K3+5ZdzQKFzWwPvKSG3TDTKOTHOMOwQLmTG7nJ5FCOfIYPbrdzoxMGnMhM3hI2+qxRWrOD/yElDKk6DmtOuaLXVC0APQyA9GxNPpELi9sWPaOfl2q4hJLAYUox0OQd6dRPyEiIVljfrNxPr/hCN75Q8koIL74ltUKOEcx8XIpto= 23 | - secure: >- 24 | SbJ1P9CC+xqjIsWOpTmBaeafxlQfKgmxqLQjTqeAZzq6RN3saiRd/0cE2D3O/GOxd0Plkv+3JsEp7WFMkdang6oQ91NHAz9WicJL1lBovzFrh/YJdJOy0hhvrC2S64Q5I9GD1caWCgGq0aEr+uPRykmkyK4Cu8+wDEZUfe+BvRY= 25 | cache: 26 | directories: 27 | - node_modules 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Published on NPM](https://img.shields.io/npm/v/@polymer/marked-element.svg)](https://www.npmjs.com/package/@polymer/marked-element) 2 | [![Build status](https://travis-ci.org/PolymerElements/marked-element.svg?branch=master)](https://travis-ci.org/PolymerElements/marked-element) 3 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/marked-element) 4 | 5 | ## <marked-element> 6 | 7 | Element wrapper for the [marked](https://github.com/chjj/marked) library. 8 | 9 | `` accepts Markdown source, and renders it to a child 10 | element with the slot `markdown-html`. This child element can be styled 11 | as you would a normal DOM element. If you do not provide a child element 12 | with the `markdown-html` slot, the Markdown source will still be rendered, 13 | but to a shadow DOM child that cannot be styled. 14 | 15 | See: [Documentation](https://www.webcomponents.org/element/@polymer/marked-element), 16 | [Demo](https://www.webcomponents.org/element/@polymer/marked-element/demo/demo/index.html). 17 | 18 | ## Usage 19 | 20 | ### Installation 21 | ``` 22 | npm install --save @polymer/marked-element 23 | ``` 24 | 25 | ### In an html file 26 | ```html 27 | 28 | 29 | 32 | 37 | 38 | 39 | 40 |
41 | 53 | 54 | 55 | 56 | ``` 57 | ### In a Polymer 3 element 58 | ```js 59 | import {PolymerElement, html} from '@polymer/polymer'; 60 | import '@polymer/marked-element/marked-element.js'; 61 | 62 | class SampleElement extends PolymerElement { 63 | static get template() { 64 | return html` 65 | 70 | 71 |
72 | 84 | 85 | `; 86 | } 87 | } 88 | customElements.define('sample-element', SampleElement); 89 | ``` 90 | 91 | ## Contributing 92 | If you want to send a PR to this element, here are 93 | the instructions for running the tests and demo locally: 94 | 95 | ### Installation 96 | ```sh 97 | git clone https://github.com/PolymerElements/marked-element 98 | cd marked-element 99 | npm install 100 | npm install -g polymer-cli 101 | ``` 102 | 103 | ### Running the demo locally 104 | ```sh 105 | polymer serve --npm 106 | open http://127.0.0.1:/demo/ 107 | ``` 108 | 109 | ### Running the tests 110 | ```sh 111 | polymer test --npm 112 | ``` -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "marked-element", 3 | "license": "http://polymer.github.io/LICENSE.txt" 4 | } 5 | -------------------------------------------------------------------------------- /demo/example.md: -------------------------------------------------------------------------------- 1 | ## Markdown Renderer 2 | 3 | Example: 4 | 5 | ```html 6 | 7 | 8 |
Title
9 | 10 | 11 | ``` 12 | 13 | _Nifty_ features. 14 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | marked-element demo 15 | 16 | 17 | 21 | 22 | 23 | 24 | 52 | 53 | 54 |
55 |

<marked-element>

56 | 57 |
58 |

Inline Text

59 | 60 |
61 | 76 | 77 |
78 | 79 |
80 |

Text via Attribute, with custom styling

81 | 82 |
83 | 84 |
85 | 86 |
87 |

Remote content

88 | 89 |
90 | 93 | 94 |
95 |
96 | 97 | 98 | -------------------------------------------------------------------------------- /formatconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "style": { 3 | "ReflowComments": false 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /gen-tsd.json: -------------------------------------------------------------------------------- 1 | { 2 | "removeReferences": [ 3 | "../marked/lib/marked.d.ts" 4 | ], 5 | "excludeFiles": [ 6 | "marked-import.js" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "marked-element.html": { 4 | "convertedUrl": "marked-element.js", 5 | "exports": {} 6 | }, 7 | "marked-import.html": { 8 | "convertedUrl": "marked-import.js", 9 | "exports": {} 10 | }, 11 | "index.html": { 12 | "convertedUrl": "index.html", 13 | "exports": {} 14 | }, 15 | "demo/index.html": { 16 | "convertedUrl": "demo/index.html", 17 | "exports": {} 18 | }, 19 | "test/index.html": { 20 | "convertedUrl": "test/index.html", 21 | "exports": {} 22 | }, 23 | "test/marked-element.html": { 24 | "convertedUrl": "test/marked-element.html", 25 | "exports": {} 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /marked-element.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7 | Code distributed by Google as part of the polymer project is also 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9 | */ 10 | import '@polymer/polymer/polymer-legacy.js'; 11 | import './marked-import.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js'; 15 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 16 | 17 | /** 18 | Element wrapper for the [marked](https://github.com/chjj/marked) library. 19 | 20 | `` accepts Markdown source and renders it to a child 21 | element with the class `markdown-html`. This child element can be styled 22 | as you would a normal DOM element. If you do not provide a child element 23 | with the `markdown-html` class, the Markdown source will still be rendered, 24 | but to a shadow DOM child that cannot be styled. 25 | 26 | 27 | ### Markdown Content 28 | 29 | The Markdown source can be specified several ways: 30 | 31 | #### Use the `markdown` attribute to bind markdown 32 | 33 | 34 |
35 | 36 | 37 | #### Use ` 53 | 54 | 55 | #### Use ` 60 | 61 | 62 | Note that the ` 71 | 72 | ... 73 | 77 | ``` 78 | 79 | ### Styling 80 | If you are using a child with the `markdown-html` class, you can style it 81 | as you would a regular DOM element: 82 | 83 | [slot="markdown-html"] p { 84 | color: red; 85 | } 86 | 87 | [slot="markdown-html"] td:first-child { 88 | padding-left: 24px; 89 | } 90 | 91 | @element marked-element 92 | @demo demo/index.html 93 | */ 94 | Polymer({ 95 | /** @override */ 96 | _template: html` 97 | 102 | 103 |
104 | 105 | `, 106 | 107 | is: 'marked-element', 108 | 109 | properties: { 110 | /** 111 | * The markdown source that should be rendered by this element. 112 | */ 113 | markdown: { 114 | type: String, 115 | value: null, 116 | }, 117 | /** 118 | * Enable GFM line breaks (regular newlines instead of two spaces for 119 | * breaks) 120 | */ 121 | breaks: { 122 | type: Boolean, 123 | value: false, 124 | }, 125 | /** 126 | * Conform to obscure parts of markdown.pl as much as possible. Don't fix 127 | * any of the original markdown bugs or poor behavior. 128 | */ 129 | pedantic: { 130 | type: Boolean, 131 | value: false, 132 | }, 133 | /** 134 | * Function used to customize a renderer based on the [API specified in the 135 | * Marked 136 | * library](https://github.com/chjj/marked#overriding-renderer-methods). 137 | * It takes one argument: a marked renderer object, which is mutated by the 138 | * function. 139 | */ 140 | renderer: { 141 | type: Function, 142 | value: null, 143 | }, 144 | /** 145 | * Sanitize the output. Ignore any HTML that has been input. 146 | */ 147 | sanitize: { 148 | type: Boolean, 149 | value: false, 150 | }, 151 | /** 152 | * Function used to customize a sanitize behavior. 153 | * It takes one argument: element String without text Contents. 154 | * 155 | * e.g. `
` `` `

'. 156 | * Note: To enable this function, must set `sanitize` to true. 157 | * WARNING: If you are using this option to untrusted text, you must to 158 | * prevent XSS Attacks. 159 | */ 160 | sanitizer: { 161 | type: Function, 162 | value: null, 163 | }, 164 | /** 165 | * If true, disables the default sanitization of any markdown received by 166 | * a request and allows fetched unsanitized markdown 167 | * 168 | * e.g. fetching markdown via `src` that has HTML. 169 | * Note: this value overrides `sanitize` if a request is made. 170 | */ 171 | disableRemoteSanitization: { 172 | type: Boolean, 173 | value: false, 174 | }, 175 | /** 176 | * Use "smart" typographic punctuation for things like quotes and dashes. 177 | */ 178 | smartypants: { 179 | type: Boolean, 180 | value: false, 181 | }, 182 | /** 183 | * Callback function invoked by Marked after HTML has been rendered. 184 | * It must take two arguments: err and text and must return the resulting 185 | * text. 186 | */ 187 | callback: { 188 | type: Function, 189 | value: null, 190 | }, 191 | /** 192 | * A reference to the XMLHttpRequest instance used to generate the 193 | * network request. 194 | * 195 | * @type {XMLHttpRequest} 196 | */ 197 | xhr: { 198 | type: Object, 199 | notify: true, 200 | readOnly: true, 201 | }, 202 | }, 203 | 204 | observers: [ 205 | 'render(markdown, breaks, pedantic, renderer, sanitize, sanitizer, smartypants, callback)' 206 | ], 207 | 208 | /** @override */ 209 | ready: function() { 210 | if (this.markdown) { 211 | return; 212 | } 213 | 214 | // Use the Markdown from the first ` 14 | 15 | 16 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test/marked-element.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | marked-element basic tests 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 31 | 32 | 33 | 34 | 43 | 44 | 45 | 46 | 56 | 57 | 58 | 59 | 69 | 70 | 71 | 72 | 81 | 82 | 83 | 84 | 93 | 94 | 95 | 96 | 104 | 105 | 106 | 107 | 119 | 120 | 121 | 122 | 130 | 131 | 132 | 133 | 143 | 144 | 145 | 146 | 152 | 153 | 154 | 155 | 169 | 170 | 171 | 172 | 178 | 179 | 180 | 181 | 187 | 188 | 189 | 613 | 614 | 615 | 616 | -------------------------------------------------------------------------------- /test/remoteSanitization.md: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /test/test.md: -------------------------------------------------------------------------------- 1 | # Test 2 | 3 | [Link](http://url.com/) 4 | -------------------------------------------------------------------------------- /test/test1.md: -------------------------------------------------------------------------------- 1 | # Test Another 2 | 3 | [Link](http://url.com/) 4 | -------------------------------------------------------------------------------- /test/test2.md: -------------------------------------------------------------------------------- 1 | # Test 2 2 | -------------------------------------------------------------------------------- /wct.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "local": { 4 | "browserOptions": { 5 | "chrome": [ 6 | "no-sandbox", 7 | "headless", 8 | "disable-gpu" 9 | ], 10 | "firefox": [ 11 | "-headless" 12 | ] 13 | } 14 | } 15 | } 16 | } --------------------------------------------------------------------------------