Coloring XML data - AngularJS
I am trying to color the tags of XML data. I have an AngularJS app in which I am displaying XML data inside
a modal. The data is coming from a scope variable, displayed with <pre> tag:
<pre> xmldata.xml_one </pre>
It is prettified but to make it easy to read I want to color the tags (I think it is also called snytax
higlighting). I tried many examples/libraries/directives for that, the closest I found was this.
I can color static
xml data with it. It says one can also color dynamically changed content with it but I could not get it to work.
If you know how to do it or suggest something else I would be very happy.
angularjs xml
asked Nov 13 '18 at 5:41
cselcsel
567
add a comment |
I am trying to color the tags of XML data. I have an AngularJS app in which I am displaying XML data inside
a modal. The data is coming from a scope variable, displayed with <pre> tag:
<pre> xmldata.xml_one </pre>
It is prettified but to make it easy to read I want to color the tags (I think it is also called snytax
higlighting). I tried many examples/libraries/directives for that, the closest I found was this.
I can color static
xml data with it. It says one can also color dynamically changed content with it but I could not get it to work.
If you know how to do it or suggest something else I would be very happy.
angularjs xml
asked Nov 13 '18 at 5:41
cselcsel
567
xmldata should be declare as a scope variable of array type.Can display the variable you define in the scope
– LDS
Nov 13 '18 at 7:02
Sorry, I did not get what you are saying. I can display the xml data if that is what you are talking about. The problem is that its font color is all black. I want to change the color of tags.
– csel
Nov 13 '18 at 8:11
If that is html format then can use simple css otherwise if it is in xml format use bellow <?xml version="1.0" ?> <AdvancedStyle> <ColorSchemeStyle basecolor="blue" strokecolor="black"> <Buckets> <RangedBucket label="<10" high="10"/> </Buckets> </ColorSchemeStyle> </AdvancedStyle>
– LDS
Nov 13 '18 at 9:05
add a comment |
I am trying to color the tags of XML data. I have an AngularJS app in which I am displaying XML data inside
a modal. The data is coming from a scope variable, displayed with <pre> tag:
<pre> xmldata.xml_one </pre>
It is prettified but to make it easy to read I want to color the tags (I think it is also called snytax
higlighting). I tried many examples/libraries/directives for that, the closest I found was this.
I can color static
xml data with it. It says one can also color dynamically changed content with it but I could not get it to work.
If you know how to do it or suggest something else I would be very happy.
angularjs xml
asked Nov 13 '18 at 5:41
cselcsel
567
I am trying to color the tags of XML data. I have an AngularJS app in which I am displaying XML data inside
a modal. The data is coming from a scope variable, displayed with <pre> tag:
<pre> xmldata.xml_one </pre>
It is prettified but to make it easy to read I want to color the tags (I think it is also called snytax
higlighting). I tried many examples/libraries/directives for that, the closest I found was this.
I can color static
xml data with it. It says one can also color dynamically changed content with it but I could not get it to work.
If you know how to do it or suggest something else I would be very happy.
angularjs xml
angularjs xml
asked Nov 13 '18 at 5:41
cselcsel
567
asked Nov 13 '18 at 5:41
cselcsel
567
asked Nov 13 '18 at 5:41
cselcsel
567
asked Nov 13 '18 at 5:41
cselcsel
567
asked Nov 13 '18 at 5:41
cselcsel
567
567
xmldata should be declare as a scope variable of array type.Can display the variable you define in the scope
– LDS
Nov 13 '18 at 7:02
Sorry, I did not get what you are saying. I can display the xml data if that is what you are talking about. The problem is that its font color is all black. I want to change the color of tags.
– csel
Nov 13 '18 at 8:11
If that is html format then can use simple css otherwise if it is in xml format use bellow <?xml version="1.0" ?> <AdvancedStyle> <ColorSchemeStyle basecolor="blue" strokecolor="black"> <Buckets> <RangedBucket label="<10" high="10"/> </Buckets> </ColorSchemeStyle> </AdvancedStyle>
– LDS
Nov 13 '18 at 9:05
add a comment |
xmldata should be declare as a scope variable of array type.Can display the variable you define in the scope
– LDS
Nov 13 '18 at 7:02
Sorry, I did not get what you are saying. I can display the xml data if that is what you are talking about. The problem is that its font color is all black. I want to change the color of tags.
– csel
Nov 13 '18 at 8:11
If that is html format then can use simple css otherwise if it is in xml format use bellow <?xml version="1.0" ?> <AdvancedStyle> <ColorSchemeStyle basecolor="blue" strokecolor="black"> <Buckets> <RangedBucket label="<10" high="10"/> </Buckets> </ColorSchemeStyle> </AdvancedStyle>
– LDS
Nov 13 '18 at 9:05
xmldata should be declare as a scope variable of array type.Can display the variable you define in the scope
– LDS
Nov 13 '18 at 7:02
xmldata should be declare as a scope variable of array type.Can display the variable you define in the scope
– LDS
Nov 13 '18 at 7:02
Sorry, I did not get what you are saying. I can display the xml data if that is what you are talking about. The problem is that its font color is all black. I want to change the color of tags.
– csel
Nov 13 '18 at 8:11
Sorry, I did not get what you are saying. I can display the xml data if that is what you are talking about. The problem is that its font color is all black. I want to change the color of tags.
– csel
Nov 13 '18 at 8:11
If that is html format then can use simple css otherwise if it is in xml format use bellow <?xml version="1.0" ?> <AdvancedStyle> <ColorSchemeStyle basecolor="blue" strokecolor="black"> <Buckets> <RangedBucket label="<10" high="10"/> </Buckets> </ColorSchemeStyle> </AdvancedStyle>
– LDS
Nov 13 '18 at 9:05
If that is html format then can use simple css otherwise if it is in xml format use bellow <?xml version="1.0" ?> <AdvancedStyle> <ColorSchemeStyle basecolor="blue" strokecolor="black"> <Buckets> <RangedBucket label="<10" high="10"/> </Buckets> </ColorSchemeStyle> </AdvancedStyle>
– LDS
Nov 13 '18 at 9:05
add a comment |
1 Answer
1
active
oldest
votes
You can use the ng-style directive to apply styles to HTML elements.
For example, you can use it for your problem to apply a color for your data.
You can write:
<pre ng-style="color:<your_color>">xmldata.xml_one </pre>
To apply the specific font-color to your xml.
edited Nov 13 '18 at 13:21
Prashant Pimpale
2,9762828
answered Nov 13 '18 at 13:18
dituoadituoa
156
Hi, thanks for the answer. This colors the whole data which I can also do with changing css properties of <pre> tag. What I want is that if the data is something like this: <title>Harry</title> <author> Rowling</author> I want for example Harry and Rowling black and title and author tags blue.
– csel
Nov 14 '18 at 6:41
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274527%2fcoloring-xml-data-angularjs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use the ng-style directive to apply styles to HTML elements.
For example, you can use it for your problem to apply a color for your data.
You can write:
<pre ng-style="color:<your_color>">xmldata.xml_one </pre>
To apply the specific font-color to your xml.
edited Nov 13 '18 at 13:21
Prashant Pimpale
2,9762828
answered Nov 13 '18 at 13:18
dituoadituoa
156
Hi, thanks for the answer. This colors the whole data which I can also do with changing css properties of <pre> tag. What I want is that if the data is something like this: <title>Harry</title> <author> Rowling</author> I want for example Harry and Rowling black and title and author tags blue.
– csel
Nov 14 '18 at 6:41
add a comment |
You can use the ng-style directive to apply styles to HTML elements.
For example, you can use it for your problem to apply a color for your data.
You can write:
<pre ng-style="color:<your_color>">xmldata.xml_one </pre>
To apply the specific font-color to your xml.
edited Nov 13 '18 at 13:21
Prashant Pimpale
2,9762828
answered Nov 13 '18 at 13:18
dituoadituoa
156
Hi, thanks for the answer. This colors the whole data which I can also do with changing css properties of <pre> tag. What I want is that if the data is something like this: <title>Harry</title> <author> Rowling</author> I want for example Harry and Rowling black and title and author tags blue.
– csel
Nov 14 '18 at 6:41
add a comment |
You can use the ng-style directive to apply styles to HTML elements.
For example, you can use it for your problem to apply a color for your data.
You can write:
<pre ng-style="color:<your_color>">xmldata.xml_one </pre>
To apply the specific font-color to your xml.
edited Nov 13 '18 at 13:21
Prashant Pimpale
2,9762828
answered Nov 13 '18 at 13:18
dituoadituoa
156
You can use the ng-style directive to apply styles to HTML elements.
For example, you can use it for your problem to apply a color for your data.
You can write:
<pre ng-style="color:<your_color>">xmldata.xml_one </pre>
To apply the specific font-color to your xml.
edited Nov 13 '18 at 13:21
Prashant Pimpale
2,9762828
answered Nov 13 '18 at 13:18
dituoadituoa
156
edited Nov 13 '18 at 13:21
Prashant Pimpale
2,9762828
edited Nov 13 '18 at 13:21
Prashant Pimpale
2,9762828
edited Nov 13 '18 at 13:21
Prashant Pimpale
2,9762828
2,9762828
answered Nov 13 '18 at 13:18
dituoadituoa
156
answered Nov 13 '18 at 13:18
dituoadituoa
156
answered Nov 13 '18 at 13:18
dituoadituoa
156
156
Hi, thanks for the answer. This colors the whole data which I can also do with changing css properties of <pre> tag. What I want is that if the data is something like this: <title>Harry</title> <author> Rowling</author> I want for example Harry and Rowling black and title and author tags blue.
– csel
Nov 14 '18 at 6:41
add a comment |
Hi, thanks for the answer. This colors the whole data which I can also do with changing css properties of <pre> tag. What I want is that if the data is something like this: <title>Harry</title> <author> Rowling</author> I want for example Harry and Rowling black and title and author tags blue.
– csel
Nov 14 '18 at 6:41
Hi, thanks for the answer. This colors the whole data which I can also do with changing css properties of <pre> tag. What I want is that if the data is something like this: <title>Harry</title> <author> Rowling</author> I want for example Harry and Rowling black and title and author tags blue.
– csel
Nov 14 '18 at 6:41
Hi, thanks for the answer. This colors the whole data which I can also do with changing css properties of <pre> tag. What I want is that if the data is something like this: <title>Harry</title> <author> Rowling</author> I want for example Harry and Rowling black and title and author tags blue.
– csel
Nov 14 '18 at 6:41
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274527%2fcoloring-xml-data-angularjs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
xmldata should be declare as a scope variable of array type.Can display the variable you define in the scope
– LDS
Nov 13 '18 at 7:02
Sorry, I did not get what you are saying. I can display the xml data if that is what you are talking about. The problem is that its font color is all black. I want to change the color of tags.
– csel
Nov 13 '18 at 8:11
If that is html format then can use simple css otherwise if it is in xml format use bellow <?xml version="1.0" ?> <AdvancedStyle> <ColorSchemeStyle basecolor="blue" strokecolor="black"> <Buckets> <RangedBucket label="<10" high="10"/> </Buckets> </ColorSchemeStyle> </AdvancedStyle>
– LDS
Nov 13 '18 at 9:05