Comments (6)
Have you tried using the n2m.setCustomTransformer("video", cb-function)
method to handle videos as the way you want? You can checkout the example for custom transformers to achieve the required results.
from notion-to-md.
Like @that-ambuj mentioned you can use the setCustomTransformer
method to render the element the way you want. Here is a simple example:
n2m.setCustomTransformer("video", async (block) => {
const { video } = block as any;
const { type } = video;
const video_url = video[type].url;
return `
<video src="${video_url}" controls>
Your browser does not support the video tag.
</video>
`;
});
do you know if there are any repositories that are open-source and already use notion-to-md so I can check how it works and get some inspiration?
As far as your question is concerned I would suggest checking out the used by section on the right sidebar of the repo or here is the link
from notion-to-md.
Thanks your the help! Now this is what I get... I am pretty new to web dev so I am not sure how to program it that it recognizes
![Screenshot 2023-05-21 at 17 08 22](https://private-user-images.githubusercontent.com/23746655/239750136-a0411686-bcae-4e94-b948-7f639f4a5471.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDQ3ODEzMjQsIm5iZiI6MTcwNDc4MTAyNCwicGF0aCI6Ii8yMzc0NjY1NS8yMzk3NTAxMzYtYTA0MTE2ODYtYmNhZS00ZTk0LWI5NDgtN2Y2MzlmNGE1NDcxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTA5VDA2MTcwNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRjNzAzYmUzMmFhODQ4ODQ2OGM3MzlhNTcwN2ZmMTg1OGI2MTJhNzBmYzhmNTk0Y2JjMGMzYjdmZDU1MTM3NzAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.yN_eRPUzry7eYZcITtpG-6VJDYRfUZm34ryNrulHOWI)
from notion-to-md.
So it's a minor fix. In the code sample, I have provided, there is leading space in the string due to which it is rendered as a code block. Here is how you can fix it:
n2m.setCustomTransformer("video", async (block) => {
const { video } = block as any;
const { type } = video;
const video_url = video[type].url;
return `<video src="${video_url}" controls> Your browser does not support the video tag. </video>`;
});
or
n2m.setCustomTransformer("video", async (block) => {
const { video } = block as any;
const { type } = video;
const video_url = video[type].url;
return (`
<video src="${video_url}" controls>
your browser does not support the video tag.
</video>
`).trim();
});
from notion-to-md.
Thanks! But it is still displayed as text (not code, but normal text). Maybe it's about how I implemented it?
![Screenshot 2023-05-21 at 17 29 30](https://private-user-images.githubusercontent.com/23746655/239751510-16bc8f89-5b38-4753-abe9-418f3ad814bb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDQ3ODEzMjQsIm5iZiI6MTcwNDc4MTAyNCwicGF0aCI6Ii8yMzc0NjY1NS8yMzk3NTE1MTAtMTZiYzhmODktNWIzOC00NzUzLWFiZTktNDE4ZjNhZDgxNGJiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTA5VDA2MTcwNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTllOWU2ZjYxMzU3NTQxYjI0NDlkYTNmODg4ODZhMGEzZGZiYmYyMzE2M2NlMGQ0YjBhMTIzNjAzMDZiMjBkOTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.3PsMdb0sEN4DKfQ0V8XJN7Qgs6i2wpIFvEZieyB6c9k)
My implementation:
<section>
<h1 className="font-bold text-3xl font-serif mb-5">
{blogPost.metadata.title}
</h1>
<article className="prose dark:prose-invert prose-code">
{blogPost.metadata.updated && (
<Callout
text={"Last updated in " + blogPost.metadata.updated + "."}
emoji="🗓️"
/>
)}
<ReactMarkdown>{blogPost.content}</ReactMarkdown>
</article>
</section>
from notion-to-md.
I believe react-markdown
doesn't render HTML by default you need to use another package as a plugin.
Refer to this: https://stackoverflow.com/a/70548866
from notion-to-md.
Related Issues (20)
- Can I get color info from notion?
- Notion has changed `link_to_page` to `mention` for @ links HOT 1
- Quotes with extra content
- Can you turn this into an N8N node? HOT 1
- Keep errors uncaught HOT 3
- fs dependency issues HOT 2
- Why make breaking changes in minor versions ?????? Why HOT 1
- Improvement: Use string union for Block Type instead of string HOT 8
- support notion database HOT 4
- 'undefined' in the last line of table markdown string HOT 6
- Can you turn of loading child pages entirley? HOT 4
- missing/insufficient newlines after <details> tags HOT 1
- Commit to semantic versioning? HOT 1
- Wrong typings - CustomTransformer? HOT 3
- Significant Performance Improvement in Markdown Conversion Process HOT 1
- blocksToMarkdown() drops sublist items in a column HOT 2
- Feature Request: link previews HOT 1
- Children blocks with custom transformers are not included in the output of blocksToMarkdown HOT 2
- How does this compare to the export to markdown option in Notion? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from notion-to-md.