Преглед на файлове

Docs: new Markdown output demo.

godai78 преди 5 години
родител
ревизия
71dc347abd

+ 21 - 1
packages/ckeditor5-markdown-gfm/docs/_snippets/features/markdown.html

@@ -1,4 +1,24 @@
-<div id="snippet-markdown">This is [CKEditor 5](https://ckeditor.com).</div>
+<div id="snippet-markdown">
+
+<h2>The Markdown language</h2>
+<p>Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by <a href="https://daringfireball.net/projects/markdown/" target="_blank">John Gruber</a> in 2004, Markdown is now one of the world&rsquo;s most popular markup languages.</p>
+
+<h2>Editing with markdown output</h2>
+<p>The <a href="https://ckeditor.com">CKEditor 5 WYSIWYG</a> editor lets the user utilize this flexible yet simple markup language, in the GitHub flavor. The output covers the most important features, like <a href="https://ckeditor.com">links</a>, <strong>different</strong> kinds of <em>emphasis</em>, the <code>inline code formatting</code> or the code blocks:</p>
+
+<pre>
+<code class="language-css">
+	p {
+		text-align: center;
+		color: red;
+	  }
+</code>
+</pre>
+
+<h2>Headings are supported, too!</h2>
+<p>Try it yourself, add elements and see the Markdown output below.</p>
+
+</div>
 
 <p>Output:</p>
 

+ 12 - 1
packages/ckeditor5-markdown-gfm/docs/_snippets/features/markdown.js

@@ -9,13 +9,15 @@ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
 
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
+import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
 import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-markdown' ), {
-		plugins: [ ArticlePluginSet, EasyImage, Markdown ],
+		plugins: [ ArticlePluginSet, EasyImage, Markdown, Code, CodeBlock ],
 		toolbar: [
 			'heading',
 			'|',
@@ -25,6 +27,9 @@ ClassicEditor
 			'bulletedList',
 			'numberedList',
 			'|',
+			'code',
+			'codeBlock',
+			'|',
 			'outdent',
 			'indent',
 			'|',
@@ -35,6 +40,12 @@ ClassicEditor
 		image: {
 			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
 		},
+		codeBlock: {
+			languages: [
+				{ language: 'css', label: 'CSS' },
+				{ language: 'html', label: 'HTML' }
+			]
+		},
 		cloudServices: CS_CONFIG
 	} )
 	.then( editor => {

+ 11 - 4
packages/ckeditor5-markdown-gfm/docs/features/markdown.md

@@ -23,6 +23,17 @@ editor.setData( 'This is **bold**.' );
 	And please do remember – using Markdown [does not automatically make your application/website secure](https://github.com/ckeditor/ckeditor5-markdown-gfm/issues/16#issuecomment-375752994).
 </info-box>
 
+## Demo
+
+{@snippet features/markdown}
+
+## Related features
+
+Some other ways to output the edited content include:
+
+* {@link features/export-word Export to Word} &ndash; Allows you to generate editable `.docx` files out of your editor-created content.
+* {@link features/export-pdf Export to PDF} &ndash; Allows you to generate portable PDF files out of your editor-created content.
+
 ## Installation
 
 To enable this data processor in your editor install the [`@ckeditor/ckeditor5-markdown-gfm`](https://www.npmjs.com/package/@ckeditor/ckeditor5-markdown-gfm) package:
@@ -60,10 +71,6 @@ ClassicEditor
 
 ```
 
-## Demo
-
-{@snippet features/markdown}
-
 ## Contribute
 
 The source code of this feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-markdown-gfm.