Fix Theme#listItemColor and OL
This commit is contained in:
parent
dc5cc9471c
commit
1a4418c461
@ -87,6 +87,8 @@ public class MarkdownRenderer {
|
|||||||
0x20000000
|
0x20000000
|
||||||
);
|
);
|
||||||
|
|
||||||
|
final int red = 0xFFff0000;
|
||||||
|
|
||||||
final SpannableConfiguration configuration = SpannableConfiguration.builder(context)
|
final SpannableConfiguration configuration = SpannableConfiguration.builder(context)
|
||||||
.asyncDrawableLoader(loader)
|
.asyncDrawableLoader(loader)
|
||||||
.urlProcessor(urlProcessor)
|
.urlProcessor(urlProcessor)
|
||||||
@ -94,6 +96,7 @@ public class MarkdownRenderer {
|
|||||||
.theme(SpannableTheme.builderWithDefaults(context)
|
.theme(SpannableTheme.builderWithDefaults(context)
|
||||||
.codeBackgroundColor(background)
|
.codeBackgroundColor(background)
|
||||||
.codeTextColor(prism4jTheme.textColor())
|
.codeTextColor(prism4jTheme.textColor())
|
||||||
|
.listItemColor(red)
|
||||||
.build())
|
.build())
|
||||||
.factory(new GifAwareSpannableFactory(gifPlaceholder))
|
.factory(new GifAwareSpannableFactory(gifPlaceholder))
|
||||||
.trimWhiteSpaceEnd(false)
|
.trimWhiteSpaceEnd(false)
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<a :href="linkHref()" v-text="linkText()"></a>
|
<a :href="linkHref()" target="_blank" rel="noopener noreferrer">{{linkText()}}<OutboundLink/></a>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -23,6 +23,13 @@ var map = {
|
|||||||
},
|
},
|
||||||
"html-blocks": {
|
"html-blocks": {
|
||||||
href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements"
|
href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements"
|
||||||
|
},
|
||||||
|
"jsoup": {
|
||||||
|
displayName: "Jsoup",
|
||||||
|
href: "https://github.com/jhy/jsoup/"
|
||||||
|
},
|
||||||
|
"markwon-jsoup": {
|
||||||
|
href: "https://github.com/noties/Markwon/tree/master/markwon-html-parser-impl/src/main/java/ru/noties/markwon/html/impl/jsoup"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
15
docs/.vuepress/components/ThemeProperty.vue
Normal file
15
docs/.vuepress/components/ThemeProperty.vue
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<table>
|
||||||
|
<tr><td><b>name</b></td><td><code>{{name}}</code></td></tr>
|
||||||
|
<tr><td><b>type</b></td><td><code>{{type}}</code></td></tr>
|
||||||
|
<tr><td><b>default</b></td><td v-html="defaults"></td></tr>
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ThemeProperty",
|
||||||
|
props: ["name", "type", "defaults"]
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -8,15 +8,18 @@ module.exports = {
|
|||||||
themeConfig: {
|
themeConfig: {
|
||||||
nav: [
|
nav: [
|
||||||
{ text: 'Install', link: '/docs/install.md' },
|
{ text: 'Install', link: '/docs/install.md' },
|
||||||
|
{ text: 'Changelog', link: '/CHANGELOG.md' },
|
||||||
{ text: 'Github', link: 'https://github.com/noties/Markwon' }
|
{ text: 'Github', link: 'https://github.com/noties/Markwon' }
|
||||||
],
|
],
|
||||||
sidebar: [
|
sidebar: [
|
||||||
'/',
|
'/',
|
||||||
'/docs/getting-started.md',
|
'/docs/getting-started.md',
|
||||||
'/docs/configure.md',
|
'/docs/configure.md',
|
||||||
'/docs/html.md',
|
'/docs/theme.md',
|
||||||
'/docs/syntax-highlight.md',
|
'/docs/factory.md',
|
||||||
'/docs/image-loader.md',
|
'/docs/image-loader.md',
|
||||||
|
'/docs/syntax-highlight.md',
|
||||||
|
'/docs/html.md',
|
||||||
'/docs/view.md'
|
'/docs/view.md'
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
1
docs/CHANGELOG.md
Normal file
1
docs/CHANGELOG.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
# Changelog
|
0
docs/deploy.sh
Normal file → Executable file
0
docs/deploy.sh
Normal file → Executable file
@ -1 +1,42 @@
|
|||||||
# Configuration
|
# Configuration
|
||||||
|
|
||||||
|
factories
|
||||||
|
basic info
|
||||||
|
there are a lot of options, but using default instance will probably fit the needs (except maybe for image loader)
|
||||||
|
|
||||||
|
## Theme
|
||||||
|
|
||||||
|
## Images
|
||||||
|
|
||||||
|
### Async loader
|
||||||
|
|
||||||
|
### Size resolver <Badge text="1.0.1" />
|
||||||
|
|
||||||
|
## Syntax highlight
|
||||||
|
|
||||||
|
Although interface was there initially only starting with {version} there is an implementation
|
||||||
|
refer to doc
|
||||||
|
|
||||||
|
## Link resolver
|
||||||
|
|
||||||
|
Interface to respond to action when a link span is clicked
|
||||||
|
|
||||||
|
## URL processor
|
||||||
|
|
||||||
|
Interface to pre-process all URLs in a document (assets, relative, absolute)
|
||||||
|
|
||||||
|
## Factory <Badge text="1.1.0" />
|
||||||
|
|
||||||
|
## softBreakAddsNewLine <Badge text="1.1.1" />
|
||||||
|
issue, reason
|
||||||
|
|
||||||
|
## trimWhiteSpaceEnd <Badge text="2.0.0" />
|
||||||
|
compact mode
|
||||||
|
|
||||||
|
## HTML <Badge text="2.0.0" />
|
||||||
|
|
||||||
|
### Parser
|
||||||
|
|
||||||
|
### Renderer
|
||||||
|
|
||||||
|
### htmlIgnoreNonClosedTags
|
||||||
|
1
docs/docs/factory.md
Normal file
1
docs/docs/factory.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
# Factory <Badge text="1.1.0" />
|
@ -1,6 +1,6 @@
|
|||||||
# Getting started
|
# Getting started
|
||||||
|
|
||||||
:::tip Installation
|
:::tip Installation
|
||||||
Please follow [installation](/docs/install.md) section instructions
|
Please follow [installation](/docs/install.md) instructions
|
||||||
to learn how to add `Markwon` to your project
|
to learn how to add `Markwon` to your project
|
||||||
:::
|
:::
|
@ -1,12 +1,12 @@
|
|||||||
# HTML
|
# HTML
|
||||||
<Badge text="2.x.x" />
|
<Badge text="2.0.0" />
|
||||||
|
|
||||||
Starting with version `2.x.x` `Markwon` brings the whole HTML parsing/rendering
|
Starting with version `2.0.0` `Markwon` brings the whole HTML parsing/rendering
|
||||||
stack _on-site_. The main reason for this are _special_ definitions of HTML nodes
|
stack _on-site_. The main reason for this are _special_ definitions of HTML nodes
|
||||||
by <Link name="commonmark-spec" />. More specifically: <Link name="commonmark-spec#inline" displayName="inline" />
|
by <Link name="commonmark-spec" />. More specifically: <Link name="commonmark-spec#inline" displayName="inline" />
|
||||||
and <Link name="commonmark-spec#block" displayName="block" />.
|
and <Link name="commonmark-spec#block" displayName="block" />.
|
||||||
These two are _a bit_ different from _native_ HTML understanding.
|
These two are _a bit_ different from _native_ HTML understanding.
|
||||||
Well, they are completely different and share only the same names as
|
Well, they are _completely_ different and share only the same names as
|
||||||
<Link name="html-inlines" displayName="HTML-inline"/> and <Link name="html-blocks" displayName="HTML-block"/>
|
<Link name="html-inlines" displayName="HTML-inline"/> and <Link name="html-blocks" displayName="HTML-block"/>
|
||||||
elements. This leads to situations when for example an `<i>` tag is considered
|
elements. This leads to situations when for example an `<i>` tag is considered
|
||||||
a block when it's used like this:
|
a block when it's used like this:
|
||||||
@ -84,11 +84,89 @@ This might seem like a minor problem, but add more tags to a document,
|
|||||||
introduce some deeply nested structures, spice openning and closing tags up
|
introduce some deeply nested structures, spice openning and closing tags up
|
||||||
by adding markdown markup between them and finally write _malicious_ HTML code :laughing:!
|
by adding markdown markup between them and finally write _malicious_ HTML code :laughing:!
|
||||||
|
|
||||||
Because of this I
|
There is no such problem on the _frontend_ for which commonmark specification is mostly
|
||||||
|
aimed as _frontend_ runs in a web-browser environment. After all _parsed_ markdown
|
||||||
|
will become HTML tags (most common usage). And web-browser will know how to render final result.
|
||||||
|
|
||||||
afterall creating an implementation of a web browser is not a purpose of this library.
|
We, on the other hand, do not posess HTML heritage (*thank :robot:!*), but still
|
||||||
|
want to display some HTML to style resulting markdown a bit. That's why `Markwon`
|
||||||
|
incorporated own HTML parsing logic. It is based on the <Link name="jsoup" /> project.
|
||||||
|
And makes usage of the `Tokekiser` class that allows to _tokenise_ input HTML.
|
||||||
|
All other code that doesn't follow this purpose was removed. It's safe to use
|
||||||
|
in projects that already have `jsoup` dependency as `Markwon` repackaged **jsoup** source classes
|
||||||
|
(which could be found <Link name="markwon-jsoup" displayName="here"/>)
|
||||||
|
|
||||||
html-entities
|
## Parser
|
||||||
|
|
||||||
|
There are no additional steps to configure HTML parsing. It's enabled by default.
|
||||||
|
If you wish to _exclude_ it, please follow the [exclude](#exclude-html-parsing) section below.
|
||||||
|
|
||||||
|
The key class here is: `MarkwonHtmlParser` that is defined in `markwon-html-parser-api` module.
|
||||||
|
`markwon-html-parser-api` is a simple module that defines HTML parsing contract and
|
||||||
|
does not provide implementation.
|
||||||
|
|
||||||
|
To change what implementation `Markwon` should use, `SpannableConfiguration` can be used:
|
||||||
|
|
||||||
|
```java{2}
|
||||||
|
SpannableConfiguration.builder(context)
|
||||||
|
.htmlParser(MarkwonHtmlParser)
|
||||||
|
.build();
|
||||||
|
```
|
||||||
|
|
||||||
|
`markwon-html-parser-impl` on the other hand provides `MarkwonHtmlParser` implementation.
|
||||||
|
It's called `MarkwonHtmlParserImpl`. It can be created like this:
|
||||||
|
|
||||||
|
```java
|
||||||
|
final MarkwonHtmlParser htmlParser = MarkwonHtmlParserImpl.create();
|
||||||
|
// or
|
||||||
|
final MarkwonHtmlParser htmlParser = MarkwonHtmlParserImpl.create(HtmlEmptyTagReplacement);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Empty tag replacement
|
||||||
|
|
||||||
|
In order to append text content for self-closing, void or just _empty_ HTML tags,
|
||||||
|
`HtmlEmptyTagReplacement` can be used. As we cannot set Span for empty content,
|
||||||
|
we must represent empty tag with text during parsing stage (if we want it to be represented).
|
||||||
|
|
||||||
|
Consider this:
|
||||||
|
* `<img src="me-sad.JPG">`
|
||||||
|
* `<br />`
|
||||||
|
* `<who-am-i></who-am-i>`
|
||||||
|
|
||||||
|
By default (`HtmlEmptyTagReplacement.create()`) will handle `img` and `br` tags.
|
||||||
|
`img` will be replaced with `alt` property if it is present and `\uFFFC` if it is not.
|
||||||
|
And `br` will insert a new line.
|
||||||
|
|
||||||
|
### Non-closed tags
|
||||||
|
|
||||||
|
It's possible that your HTML can contain non-closed tags. By default `Markwon` will ignore them,
|
||||||
|
but if you wish to get a bit closer to a web-browser experience, you can allow this behaviour:
|
||||||
|
|
||||||
|
```java{2}
|
||||||
|
SpannableConfiguration.builder(context)
|
||||||
|
.htmlIgnoreNonClosedTags(false)
|
||||||
|
.build();
|
||||||
|
```
|
||||||
|
|
||||||
|
:::warning Note
|
||||||
|
If there is (for example) an `<i>` tag at the start of a document and it's not closed
|
||||||
|
and `Markwon` is configured to **not** ignore non-closed tags (`.htmlIgnoreNonClosedTags(false)`),
|
||||||
|
it will make the whole document in italics
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Implementation note
|
||||||
|
|
||||||
|
`MarkwonHtmlParserImpl` does not create a unified HTML node. Instead it creates
|
||||||
|
2 collections: inline tags and block tags. Inline tags are represented as a `List`
|
||||||
|
of inline tags (<Link name="html-inlines" displayName="reference" />). And
|
||||||
|
block tags are structured in a tree. This helps to achieve _browser_-like behaviour,
|
||||||
|
when open inline tag is applied to all content (even if inside blocks) until closing tag.
|
||||||
|
All tags that are not _inline_ are considered to be _block_ ones.
|
||||||
|
|
||||||
|
## Renderer
|
||||||
|
|
||||||
|
### Custom tag handler
|
||||||
|
CssInlineStyleParser
|
||||||
|
|
||||||
## Exclude HTML parsing
|
## Exclude HTML parsing
|
||||||
|
|
||||||
@ -112,3 +190,10 @@ dependencies {
|
|||||||
Excluding `markwon-html-parser-impl` this way will result in
|
Excluding `markwon-html-parser-impl` this way will result in
|
||||||
`MarkwonHtmlParser#noOp` implementation. No further steps are
|
`MarkwonHtmlParser#noOp` implementation. No further steps are
|
||||||
required.
|
required.
|
||||||
|
|
||||||
|
:::warning Note
|
||||||
|
Excluding `markwon-html-parser-impl` won't remove *all* the content between
|
||||||
|
HTML tags. It will if `commonmark` decides that a specific fragment is a
|
||||||
|
`HtmlBlock`, but it won't if fragment is considered a `HtmlInline` as `HtmlInline`
|
||||||
|
does not contain contents (just a tag definition).
|
||||||
|
:::
|
@ -1 +1 @@
|
|||||||
# Image loader
|
# Images
|
@ -5,6 +5,10 @@ next: /docs/getting-started.md
|
|||||||
|
|
||||||
# Installation
|
# Installation
|
||||||
|
|
||||||
|
<MavenBadges />
|
||||||
|
|
||||||
|
proguard when using image-loader
|
||||||
|
|
||||||
## Snapshot
|
## Snapshot
|
||||||
|
|
||||||

|

|
||||||
|
50
docs/docs/theme.md
Normal file
50
docs/docs/theme.md
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
# Theme
|
||||||
|
|
||||||
|
Here is the list of properties that can be configured via `SpannableTheme#builder` factory
|
||||||
|
method. If you wish to control what is out of this list, you can use [SpannableFactory](/docs/factory.md)
|
||||||
|
abstraction which lets you to gather full control of Spans that are used to display markdown.
|
||||||
|
|
||||||
|
## Link color
|
||||||
|
|
||||||
|
Controls the color of a [link](#)
|
||||||
|
|
||||||
|
<ThemeProperty name="linkColor" type="@ColorInt int" defaults="Default link color of a context where markdown is displayed <sup>*</sup>" />
|
||||||
|
|
||||||
|
<sup>*</sup> `TextPaint#linkColor` will be used to determine linkColor of a context
|
||||||
|
|
||||||
|
## Block margin
|
||||||
|
|
||||||
|
Starting margin before text content for the:
|
||||||
|
* lists
|
||||||
|
* blockquotes
|
||||||
|
* task lists
|
||||||
|
|
||||||
|
<ThemeProperty name="blockMargin" type="@Px int" defaults="24dp" />
|
||||||
|
|
||||||
|
## Block quote
|
||||||
|
|
||||||
|
Customizations for the `blockquote` stripe
|
||||||
|
|
||||||
|
> Quote
|
||||||
|
|
||||||
|
### Stripe width
|
||||||
|
|
||||||
|
Width of a blockquote stripe
|
||||||
|
|
||||||
|
<ThemeProperty name="blockQuoteWidth" type="@Px int" defaults="1/4 of the <a href='#block-margin'>block margin</a>" />
|
||||||
|
|
||||||
|
### Stripe color
|
||||||
|
|
||||||
|
Color of a blockquote stripe
|
||||||
|
|
||||||
|
<ThemeProperty name="blockQuoteColor" type="@ColorInt int" defaults="textColor with <code>25</code> (0-255) alpha value" />
|
||||||
|
|
||||||
|
## List
|
||||||
|
|
||||||
|
### List item color
|
||||||
|
|
||||||
|
Controls the color of a list item. For ordered list: leading number,
|
||||||
|
for unordered list: bullet.
|
||||||
|
|
||||||
|
* UL
|
||||||
|
1. OL
|
@ -1 +1 @@
|
|||||||
# View
|
# MarkwonView
|
||||||
|
@ -10,6 +10,7 @@ public class OrderedListItemSpan implements LeadingMarginSpan {
|
|||||||
|
|
||||||
private final SpannableTheme theme;
|
private final SpannableTheme theme;
|
||||||
private final String number;
|
private final String number;
|
||||||
|
private final Paint paint = ObjectsPool.paint();
|
||||||
|
|
||||||
// we will use this variable to check if our order number text exceeds block margin,
|
// we will use this variable to check if our order number text exceeds block margin,
|
||||||
// so we will use it instead of block margin
|
// so we will use it instead of block margin
|
||||||
@ -39,7 +40,9 @@ public class OrderedListItemSpan implements LeadingMarginSpan {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
theme.applyListItemStyle(p);
|
paint.set(p);
|
||||||
|
|
||||||
|
theme.applyListItemStyle(paint);
|
||||||
|
|
||||||
final int numberWidth = (int) (p.measureText(number) + .5F);
|
final int numberWidth = (int) (p.measureText(number) + .5F);
|
||||||
|
|
||||||
@ -60,6 +63,6 @@ public class OrderedListItemSpan implements LeadingMarginSpan {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// @since 1.1.1 we are using `baseline` argument to position text
|
// @since 1.1.1 we are using `baseline` argument to position text
|
||||||
c.drawText(number, left, baseline, p);
|
c.drawText(number, left, baseline, paint);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user