-
Notifications
You must be signed in to change notification settings - Fork 258
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add an example of using with Prism.js #117
Comments
I add it by referenced to #21 <template>
<textarea v-model="input"></v-textarea>
<vue-markdown :source="input" @rendered="update"></vue-markdown>
</template>
<script>
import VueMarkdown from "vue-markdown";
import Prism from "prismjs";
import "prismjs/themes/prism-okaidia.css"; // theme
import 'prismjs/components/prism-go.min'; // language
export default {
components: {
VueMarkdown
},
data: () => ({
input: `\`\`\`go
func test() int {
return 0
}
\`\`\``
}),
methods: {
update: function() {
this.$nextTick(() => {
Prism.highlightAll();
});
}
}
};
</script> And you may check whether prism-language.js extend other language like cpp. |
Thank you very much! I also recommend you add an example and explanation to README.md for other people. |
I tried babel-plugin-prismjs in babel.config.js: "plugins": [
["prismjs", {
"languages": ["javascript", "css", "markup", "json"],
"plugins": ["line-numbers"],
"theme": "okaidia",
"css": true
}]
] It will be smarter, there is no need to have : import "prismjs/themes/prism-okaidia.css"; // theme
import 'prismjs/components/prism-go.min'; // language in your vue component, and more configurable. |
Hello. The best solution to me was to create a wrapper component. Eg: MyMarkdown.vue <template>
<VueMarkdown v-bind="$props" />
</template>
<script>
import VueMarkdown from 'vue-markdown'
import Prism from 'prismjs'
import 'prismjs/themes/prism-dark.css'
export default {
components: {
VueMarkdown
},
props: {
...VueMarkdown.props,
emoji: {
default: false,
type: Boolean
},
html: {
default: false,
type: Boolean
}
},
mounted() {
this.$nextTick(() => {
Prism.highlightAll()
});
}
}
</script> And use this wrapper Hope it helps. |
Hi! I've been trying to add Syntax Highlighting to my app, but I haven't found any resources describing how you are supposed to do this.
Could you show me an example of using this vue-markdown with Prism.js (or any other syntax highlighter)? I also think it would be a great idea to add an example to the README.md file.
The text was updated successfully, but these errors were encountered: